选择 div 的第一个孩子而不使用第一个孩子答案

【问题标题】：Select first child of div without using first-child选择 div 的第一个孩子而不使用第一个孩子
【发布时间】：2019-01-11 16:15:37
【问题描述】：

我想选择父 div 的第一个孩子，但我有一些限制：我想选择的 div 有一个非常通用的类名，我无权访问标记来给它另一个类。由于它有这样一个通用的类名，如果我使用第一个孩子，我的更改将应用于页面上不相关的元素。它还有一个具有相同类型和类名的兄弟：

<div class="parent-div">
    <div class="extremely-general-class">I want to change this one</div>
    <div class="extremely-general-class">And not change this one</div>
</div>

有没有办法只选择父 div 的第一个孩子，但不使用第一个孩子？如果我使用

parent-div > general-class

那么它将适用于两个兄弟 div。

【问题讨论】：

"因为它有这样一个通用的类名，如果我使用 first-child，我的更改将应用于页面上不相关的元素。"我不太明白。你能提供更具体的例子来说明 :first-child 可能匹配错误的元素吗？
我有点困惑。我没有看到关于为什么 .parent-div > div:first-child 不起作用的论点。
页面上还有其他 div 也有 .extremely-general-class 并且是其父级的第一个子级。
.parent-div > .general-class:first-child 不适合你吗？
@HeatherStone 我意识到了这一点。 .parent-div 也到处都是吗？而且您不能使用.parent-div > .general-class:first-child，因为并非所有第一个孩子.general-class 都应该被选为.parent-div 的孩子？如果没有，.parent-div > .general-class:first-child 应该像.parent-div 一样工作，因为> .general-class:first-child 将只适用于.parend-div 的子代。你了解.general-class:first-child、.parent-div .general-class:first-child和.parent-div > .general-class:first-child之间的区别吗？

标签： css css-selectors

【解决方案1】：

答案是嵌套，例如：

grand-grand-parent-div > grandparent-div > parent-div > general-class:first-child

以此类推，只要结构不重复即可。

我想到的另一个想法是使用:not() 选择器，但只有当您不想设置样式的其他 div 具有待设置样式所没有的共同点时，才会出现这种情况。

【讨论】：

【解决方案2】：

您可以使用选择第一个孩子

general-class:nth-child(1)

也就是说，正如你所问的，不使用第一个孩子

【讨论】：