CSS 仅适用于第一个匹配元素

Posted 2023-03-06

【中文标题】CSS 仅适用于第一个匹配元素

【英文标题】：CSS only for first matching element

【发布时间】：2021-12-08 12:39:34

【问题描述】：

我有多个包含段落的重复 div 部分，我只想在 div 内的第一个匹配段落上应用特定的 CSS。

div.example1 p.special~p.special 
  color: green;

<p>Top Paragraph</p>
<div class='top'>

  <div class="example1">
    <p class="special">This is paragraph 1 and it should be green and bold</p>
  </div>

  <div class="example1">
    <p class="special">This is paragraph 2</p>
  </div>

  <div class="example1">
    <p class="special">This is paragraph 3</p>
  </div>

</div>

这里是link -

【参考方案1】：

问题 使用第二个 css 选择器，您将修改所有 p 标记之后的 p 标记，这些标记位于 div 中，类为 example1

解决方案 不是针对第一个 p 标签，而是针对第一个 .example1 div，而不是通过执行以下操作：

.example1:first-of-type .special 
  color: green;
  font-weight: bold;

<p>Top Paragraph</p>
<div class='top'>

  <div class="example1">
    <p class="special">This is paragraph 1 and it should be green and bold</p>
  </div>

  <div class="example1">
    <p class="special">This is paragraph 2</p>
  </div>

  <div class="example1">
    <p class="special">This is paragraph 3</p>
  </div>

</div>

旁注尽量保持你的css选择器尽可能短，并且直截了当。避免做div.class之类的事情，而是使用.class

【讨论】：

您的回答是正确的，但我会考虑给出一个理由，说明为什么将选择器保持“平坦”而不是通过添加过多的特异性来过度限定它们被认为是一种好的做法。

@UncaugthTypeError 是一种很好的做法，因为当像 div.class 那样做时，你会提高特异性。这可能会导致无数小时试图覆盖它，这在小型项目中可能没有意义，但在扩展事物时它确实变得复杂且难以维护。

更新您的答案以添加这些原因 - 这样您就可以保持上下文相关，并且在 cmets 中不会丢失或忽略任何内容。

【参考方案2】：

您可以使用:nth-child() 伪类来指定兄弟组中的哪个元素。 See :nth-child() Documentation

.example1:nth-child(1) .special 
  color: green; font-weight:bold;

另外还有:first-of-type，它将选择组中的第一个元素。 See :first-of-type Documentation

.example1:first-of-type .special 
  color: green; font-weight:bold;

两个选择器都将为您实现相同的 html sn-p。