具有类的孩子的第一个实例的CSS选择器？ [复制]

Posted 2023-03-06

【中文标题】具有类的孩子的第一个实例的CSS选择器？ [复制]

【英文标题】：CSS selector for first instance of child with class? [duplicate]

【发布时间】：2013-08-24 03:19:52

【问题描述】：

是否有一个 CSS 选择器用于第一个具有类的子实例？比如下面这段代码：

<div id="container">
    <div class="nothing">
    </div>
    <div class="child"> <!-- SELECT THIS ONE -->
    </div>
    <div class="child"> <!-- NOT THIS ONE -->
    </div>
    <div class="child"> <!-- NOT THIS ONE -->
    </div>
</div>

是否有一个 css 选择器来设置第一次出现的带有“child”类的 div 的样式？

【问题讨论】：

没有 CSS 选择器，但有 jQuery 选择器。

你试过什么？你有没有看过api.jquery.com/category/selectors，它列出了jQuery 可以理解的所有选择器？就个人而言，我只会使用$('.child').first()。

不，没有使用 CSS 的选择器。最接近的是 :first-of-type 选择器，但它只匹配标签名称，而不是类

Doh - 真不幸。感谢您的回复

如果您正在寻找 CSS 解决方案，那么这是一个副本。您无法使用单个选择器执行此操作，但您可以使用一种解决方法。查看链接。

【参考方案1】：

您可以使用 ":nth-child" css 选择器。

演示：http://jsfiddle.net/2pyvz/

CSS：

.child:nth-child(2)  color:red; 

【讨论】：

不起作用：jsfiddle.net/fkling/Pex2R。原因：:first-child 选择元素当且仅当它是其父元素的第一个子元素。在 OP 的示例中，div.nothing 是第一个孩子。

是的，对我也不起作用

我更新了答案。就像前面提到的:first-child 仅适用于其父级的第一个子级。看看:nth-child 是否适合你。

.child:nth-child(2) 选择其父元素的第二个子元素，而不是第一个 .child 元素。虽然它可能适用于这种特定情况，但它不是实际问题的解决方案。

:nth-of-type 只会选择同类型元素的第 n 个。在给出的示例中，第一个孩子是一个 div 元素，您不能使用:nth-of-type 来选择第一个。

【参考方案2】：

您可以使用general sibling combinator、~ 设置.child 的样式并为后续.child 兄弟姐妹恢复样式：

.child 
  color: #ff0000;

.child ~ .child 
  color: inherit;

<div id="container">
  <div class="nothing">nothing
  </div>
  <div class="child">SELECT THIS ONE
  </div>
  <div class="child">NOT THIS ONE
  </div>
  <div class="child">NOT THIS ONE
  </div>
</div>

【讨论】：

或者更好地将颜色重置为继承，它将恢复为默认值！