翻译正在进行中。

在我们的第一篇选择器文章中,我们将学习“简单”选择器,之所以这么称呼它是因为它们基于元素的类型(或其 class 或 id)直接匹配文档的一个或多个元素。

类型选择器(又名:元素选择器)

此选择器只是一个选择器名和指定的HTML元素名的不区分大小写的匹配。这是选择所有指定类型的最简单方式。让我们一起看看下面这个例子:

这是HTML:

<p>What color do you like?</p>
<div>I like blue.</div>
<p>I prefer red!</p>

这是样式表:

/* All p elements are red */
p {
  color: red;
}

/* All div elements are blue */
div {
  color: blue;
}

我们将得到这个:

进阶学习:选取不同的元素

在本次进阶学习中,我们希望你尝试在简单的CSS规则上修改选择器,将样式渲染到例子中的不同元素上。你知道怎样写一个选择器将一组规则同时应用到多个元素上吗?

如果你犯了错误,你可以随时使用“重置”按钮。如果你有点不知所措,按下“显示”按钮可以看到可能的答案。

 

 

类选择器(Class selectors)

类选择器由一个点“.”以及类后面的类名组成。类名是在HTML class文档元素属性中没有空格的任何值。由你自己选择一个名字。同样值得一提的是,文档中的多个元素可以具有相同的类名,而单个元素可以有多个类名(以空格分开多个类名的形式书写)。一下是一个简单的例子:

这是一些HTML:

<ul>
  <li class="first done">Create an HTML document</li>
  <li class="second done">Create a CSS style sheet</li>
  <li class="third">Link them all together</li>
</ul>

这是一些CSS样式:

/* The element with the class "first" is bolded */
.first {
  font-weight: bold;
}

/* All the elements with the class "done" are strike through */
.done {
  text-decoration: line-through;
}

我们得到这样一个结果:

进阶学习:处理多个类

对于这种进阶学习,我们想尝试更改段落元素上的类属性,以便您可以应用多个单独的效果。 尝试应用一个底盒类和一个角色类(编辑笔记或警告),如果你想给这个框很重要的话,这很重要。 想想这种规则集允许你建立一个模块化的风格系统。

如果您犯了错误,您可以随时使用重置按钮重设。 如果您确实卡住了,请按显示解决方案按钮查看潜在答案。

ID 选择器

ID选择器由哈希/磅符号 (#)组成,后面是给定元素的ID名称。 任何元素都可以使用id属性设置唯一的ID名称。 由你自己选择的ID是什么。 这是选择单个元素的最有效的方式。

重要提示:一个ID名称必须在文件中是唯一的。关于重复ID的行为是不可预测的,比如在一些浏览器只是第一个实例计算,其余的将被忽略。

我们来看一个简单的例子 - 这里有一些HTML:

<p id="polite"> — "Good morning."</p>
<p id="rude"> — "Go away!"</p>

简单的样式:

#polite {
  font-family: cursive;
}

#rude {
  font-family: monospace;
  text-transform: uppercase;
}

而我们得到这个作为输出:

主动学习:依据不同 ID 分配获胜者的颜色

对于这种主动学习,我们希望您给予的CSS规则的选择基于其ID的相关要素2-4合适的选择给予了比赛适当的金,银,铜三色赢家,第二和第三位。

如果你犯了一个错误,你可以使用始终重置重置按钮。如果你得到真正卡住,按显示的解决方案按钮,看到一个潜在的答案。

通用选择器(Universal selector)

通用选择(*)是最终的小丑。它允许选择在一个页面中的所有元素。由于这是很少有用到样式应用到页面上的每一个元素,它常常与其他选择器结合使用(参考下面 组合 .)

重要提示:使用通用选择时小心。因为它适用于所有的元素,在大型网页利用它可以对性能有明显的影响:网页可以显示比预期要慢。不会有太多的情况下,您想使用此选择。

现在的例子; 第一部分HTML:

<div>
  <p>I think the containing box just needed
  a <strong>border</strong> or <em>something</em>,
  but this is getting <strong>out of hand</strong>!</p>
</div>

和简单的样式表:

* {
  padding: 5px;
  border: 1px solid black;
  background: rgba(255,0,0,0.25)
}

总之,这些将会给出这样的结果:

组合器(Combinators)

在CSS中,组合器允许您将多个选择器组合在一起,这允许您在其他元素中选择元素,或者与其他元素相邻。四种可用的类型是:

  • 后代选择器——(空格键)——允许您选择嵌套在另一个元素中的某个元素(不一定是直接的后代;例如,它可以是一个孙子)。
  • 子选择器—— > ——允许您选择一个元素,该元素是另一个元素的直接子元素。
  • 相邻兄弟选择器—— + ——允许您选择一个元素,它是另一个元素的直接兄弟元素(也就是说,在它的旁边,在层次结构的同一层)。
  • 通用兄弟选择器—— ~ — —允许您选择其他元素的兄弟元素(例如,在层次结构中的相同级别,但不一定就在它的旁边)。

译者注:相邻兄弟选择器和通用兄弟选择器只会“向后”选择,DOM结构靠前的兄弟元素不在选择范围内。

这里有一个简单的例子来展示这些工作是如何工作的:

<section>
  <h2>Heading 1</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <div>
    <h2>Heading 2</h2>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
  </div>
</section>
section p {
  color: blue;
}

section > p {
  background-color: yellow;
}

h2 + p {
  text-transform: uppercase;
}

h2 ~ p {
  border: 1px dashed black;
}

CSS样式的HTML如下所示:

选择器是这样工作的:

  • section p选择了所有的 <p> 元素——前两个<p>都是<section>元素的直接子元素,而后面的两个<p>元素是 <section> 元素的孙子元素(它们在<div>里面)。因此,所有的段落文本都是蓝色的。
  • section > p 只选择前两个 <p> 元素,这两个元素是 <section> 元素的直接子元素(但后两个<p>元素不是,它们不是直接的子元素)。所以只有前两段有黄色的背景色。
  • h2 + p 只选择在相同层次结构的 <h2>元素之后直接相连的<p> 元素—— 在本例中是第一和第三段。因此,这些文本都是大写的。
  • h2 ~ p 选择任何在相同的层级上(还有之后的) <h2> 元素的 <p> 元素 ——在这种情况下,所有的段落符合此条件。因此,所有的这些都有一个虚线的边界。

下一篇文章

干得好!我们的第一篇选择器教程结束了!希望你找到你的乐趣。现在我们已经学习了我们最常使用简单的核心选择器,让我们开始学习一些更先进的功能:属性选择器

 
 

文档标签和贡献者

 最后编辑者: changknightly,