10 个有用但难记的 CSS 选择器

介绍

最初发布于devinduct

我想说的是，所有能用 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 元素之后的每个段落。当然，它可以修改为选择任意元素（元素 + 元素）之后的任意元素。为了便于示例，我使用了 article 和 p。

HTML

<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>

CSS

article + p {
  color: orange;
}

article ~ p

此选择器与上一个类似，不同之处在于，它会选中位于 article 元素之后的每个段落。段落的位置并不重要，重要的是该段落之前是否有 article 元素。

HTML

<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>

CSS

article ~ p {
  color: orange;
}

[attribute^=value]

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

HTML

<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>

CSS

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

[attribute$=value]

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

HTML

<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>

CSS

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

[attribute*=value]

此属性选择器使我们能够选择具有给定属性的每个元素，这些元素的值包含选择器中指定的字符串。字符串在属性值中的位置并不重要，只要包含该字符串，就会选择其所属元素。与往常一样，通过示例可以更容易理解。

HTML

<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>

CSS

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

p::first-line

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

HTML

<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>

CSS

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

input:in-range

在解释之前，我应该提一下，这个选择器只能应用于输入框。它选择值在给定范围内的输入框。您可以查看演示，并尝试输入给定范围之外的值。绿色边框不应该被应用。

HTML

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

CSS

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

input:out-of-range

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

HTML

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

CSS

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

:target

最后，同样重要的是，一个非常酷的选择器，它允许我们在点击 URL 指向页面元素的锚标签后，选择当前活动的元素。简而言之，当href属性包含目标元素 ID 时，点击相应的锚标签后，该选择器将选择该元素。

HTML

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

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

CSS

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

演示

结论

CSS 一直以来都非常强大。很多情况下，CSS 的潜力被开发人员忽视，从而导致网站失去了简洁性。我的意思是，只要比较一下要实现与这些选择器相同的结果需要多少 JavaScript 代码，你就会发现学习 CSS 是一项非常值得的投资。

如果你喜欢这篇文章，请分享。欢迎订阅devinduct或在Twitter上关注我，及时了解最新动态。

感谢您的阅读，我们下篇文章再见。

文章来源：https://dev.to/proticm/10-useful-and-hard-to-remember-css-selectors-56h2