Question

我有一个像这样的HTML结构：

<div class="outer">
    <div class="parent">
       <div class="child"> <!-- TARGET THIS CLASS -->
       Words!
        </div>
    </div>
    <div class="parent">
       <div class="child">
       Words!
        </div>
    </div>
</div>

我试图在HTML中首次出现.child类。我试过了

.child:first-child

但是这会针对child个类。我也试过

.outter > .child:first-child

但这似乎根本没有针对div。有什么建议吗？

Answer 1

不幸的是，这在css中并不完全可用。但是你可以这样做：

.parent:first-child .child:first-child { //css here }

这里假设第一个child元素内的第一个parent元素。如果不是，并且第一个parent元素为空，则不会定位任何内容。

Answer 2

您可以使用多个伪类（只是不在同一个元素上）

.outer .parent:first-child .child:first-child { //css here }

Answer 3

您需要根据父类来定位它，如下所示：

.outer  > .parent:first-child > .child:first-child

Answer 4

获得外部的第一个孩子，然后获得该父母的第一个孩子。

Answer 5

:first-child定位父元素中元素的第一个出现位置。因为两个.child类都是他们父母的第一个孩子，所以他们都会被你拥有的css作为目标。

要获得所需效果，请使用：

.outer .parent:first-child .child:first-child

Answer 6

.parent:first-child

似乎有用

祖先CSS的第一个孩子

6 个答案: