10 个有用且难以记住的 CSS 选择器

原文地址：10 Useful and Hard-To-Remember CSS Selectors

原文作者：Milos Protic

译文出自：掘金翻译计划

介绍

自从我写关于 CSS 的文章已经有一段时间了。在这篇文章中，我想介绍一些难以记住的 CSS 选择器，它们可以帮助我们在某些边缘情况下选择正确的元素。

我喜欢说，凡是可以用CSS做的事情（主要是与造型有关的），都不应该用JavaScript做。我在实践中经常看到，当人们缺乏有关CSS选择器的知识时，往往会使用JavaScript来为网页上的动态内容设置样式。我将向你展示几个CSS选择器，它们可以帮助你抓取和设计这种类型的内容。

选择器

以下是适合选择器列表的示例代码

nth-child(odd|even|n)

这个选择器可以帮助我们在某个组中找到一个元素。这里要提到的一件重要事情是它在其兄弟元素中选择元素。让我们看看它的实际效果。

<ul class="list">
  <li class="list-item">List item 1</li>
  <li class="list-item">List item 2</li>
  <li class="list-item">List item 3</li>
  <li class="list-item">List item 4</li>
  <li class="list-item">List item 5</li>
  <li class="list-item">List item 6</li>
  <li class="list-item">List item 7</li>
  <li class="list-item">List item 8</li>
  <li class="list-item">List item 9</li>
  <li class="list-item">List item 10</li>
  <li class="list-item">List item 11</li>
  <li class="list-item">List item 12</li>
  <li class="list-item">List item 13</li>
  <li class="list-item">List item 14</li>
</ul>

现在，如果我们想选择列表中的每一个（偶数元素）列表项，我们可以通过以下方式之一进行：

ul.list > li:nth-child(even) {
  color: orange;
}

/* or */

ul.list > li:nth-child(2n) {
  color: orange;
}

另一方面，如果我们想要选择每第二个元素，但从第一个（奇数元素）开始呢？我们也有两种方法可以做到这一点：

ul.list > li:nth-child(odd) {
  color: orange;
}

/* or */

ul.list > li:nth-child(2n+1) {
  color: orange;
}

2n+1选择器告诉引擎从第一个元素开始每隔一个元素取一次。但是，正如您所猜测的，这可以修改以涵盖更多场景，例如，从第五个元素开始每隔三个元素选择一次。很整洁，对吧？此选择器的示例如下所示：

ul.list > li:nth-child(3n+5) {
  color: orange;
}

article + p

这个选择器使我们能够选择紧跟文章元素之后的每个段落。当然也可以修改为选择任意元素后的任意元素我使用了 article 和 p来解释这个例子。

<section>
  <article>Article 1</article>
  <p>Paragraph 1</p> <!-- this will be selected -->
  <article>Article 2</article>
  <article>Article 3</article>
  <div>Div 1</div>
  <p>Paragraph 2</p>
  <article>Article 4</article>
  <p>Paragraph 3</p> <!-- this will be selected -->
</section>

article + p {
  color: orange;
}

article ~ p

这个选择器和前面的类似，不同的是这个选择器选择文章元素之后的每个段落。位置无关紧要，重要的是该段落在其自身之前的某处放置了文章元素。

<section>
  <p>Paragraph 1</p>
  <article>Article 1</article>
  <article>Article 2</article>
  <article>Article 3</article>
  <div>Div 1</div>
  <p>Paragraph 2</p> <!-- this will be selected -->
  <article>Article 4</article>
  <article>Article 5</article>
  <div>Div 2</div>
  <p>Paragraph 3</p> <!-- this will be selected -->
</section>

article ~ p {
  color: orange;
}

[attribute^=value]

属性选择器非常强大。可以让我们能够选择具有特定属性的任何元素，该属性的值以给定值开头。让我们看看它的实际效果。

<ul class="list">
  <li class="list-item">List item 1</li>
  <li class="list-item">List item 2</li>
  <li class="disabled-list-item">List item 3</li> <!-- this will be selected -->
  <li class="list-item">List item 4</li>
  <li class="list-item">List item 5</li>
  <li class="disabled-list-item">List item 6</li> <!-- this will be selected -->
  <li class="list-item">List item 7</li>
  <li class="disabled-list-item">List item 8</li> <!-- this will be selected -->
</ul>

ul.list > li[class^="disabled"] {
  color:orange
}

[attribute$=value]

此选择器与前一个选择器的作用相同，不同之处在于属性值必须以选择器中的给定值结尾。

<ul class="list">
  <li class="list-item">List item 1</li>
  <li class="list-item-disabled">List item 2</li> <!-- this will be selected -->
  <li class="list-item">List item 3</li>
  <li class="list-item">List item 4</li>
  <li class="list-item-disabled">List item 5</li> <!-- this will be selected -->
  <li class="list-item">List item 6</li>
  <li class="list-item">List item 7</li>
  <li class="list-item">List item 8</li>
</ul>

ul.list > li[class$="disabled"] {
  color:orange
}

[attribute*=value] 此属性选择器使我们能够选择具有给定属性的每个元素，该属性的值包含选择器中的给定字符串。字符串在属性值中的位置并不重要，只要包含它，所有者元素就会被选中。像往常一样，举一个会让它更容易理解的例子。

<ul class="list">
  <li class="list-item">List item 1</li>
  <li class="list-item">List item 2</li>
  <li class="list-item-disabled">List item 3</li> <!-- this will be selected -->
  <li class="list-item-disabled">List item 4</li> <!-- this will be selected -->
  <li class="list-item">List item 5</li>
  <li class="list-item-bold">List item 6</li>
</ul>

ul.list > li[class*="item-disabled"] {
  color: orange
}

p::first-line

在我们的示例中，这个伪类使我们能够选择每个段落的第一行。可以修改选择器以处理不同的元素。当我们想要突出显示写在里面的文本的开头而不将其包裹在另一个元素中时很有用。

<section>
  <p>
    Paragraph 1 First Line <!-- this line will be highlighted -->
    <br>
    Paragraph 1 Second Line
  </p>
  <article>Article 1</article>
  <article>Article 2</article>
  <article>Article 3</article>
  <div>Div 1</div>
  <p>Paragraph 2</p> <!-- this line will be highlighted -->
  <article>Article 4</article>
  <article>Article 5</article>
  <div>Div 2</div>
  <p>
    Paragraph 3 First Line <!-- this line will be highlighted -->
    <br>
    Paragraph 3 Second Line
  </p>
</section>

section > p::first-line {
  color: orange
}

input:in-range

这个选择器只能应用于输入。它选择值在给定范围内的输入。查看演示并尝试键入给定范围之外的值。不应应用绿色边框。

<input type="number" min="7" max="12" value="8" />

input:in-range {
  border: 2px solid green
}

input:out-of-range

使我们能够选择值超出给定范围的所有输入元素的伪类。每个number输入都可以设置其 min 和 max 属性，从而定义数字范围。对于有计算或一些财务操作的页面很有用。

<input type="number" min="7" max="12" value="8" />

input:out-of-range {
  border: 2px solid red
}

:target

这是最后一个非常酷但并非最不重要的选择器，它使我们能够在单击 URL 指向页面元素的锚标记后选择当前活动的元素。简而言之，当href属性包含目标元素 id 时，该元素将在单击相应的锚点标签后被此选择器选中。

<a href="#home">Home</a>
<a href="#about">About</a>

<section id="home">Home</section>
<section id="about">About</section>

:target {
  color: #fff;
  font-weight: bold;
  background-color: orange
}

示例

在codepen进行编辑:

总结

虽然CSS 一直是非常强大的。但是在许多情况下，开发人员忽略了 CSS 的可能性，因此，他们的网站失去了简洁性。我的观点是，只要比较一下通过这些选择器实现同样的结果所需要的JavaScript代码，你就会发现，学习CSS是一项非常值得的时间投资。