Question

我读过诸如Select first Descendant with CSS或How do I hide only the first element of a type?等棘手问题，但我的问题与这些问题不符。

我有这个HTML结构：

<div class="parent">
    <div>
        <p class="interline"><!-- only this -->
        <p class="interline">
        <p class="interline">
    </div>
    <div>
        <p class="interline">
        <p class="interline">
        <p class="interline">
    </div>
</div>

并且只想选择.parent div下的第一个孙<p>。

我该怎么做？

Answer 1

您还需要选择第一个div

.parent > div:first-of-type > p:first-of-type {
    color: red;
}

Demo

在上面的选择器中，我选择嵌套在第一个p内的第一个div元素，该元素进一步嵌套为 direct 子元素到具有{的元素{1}} {/}的{1}}

class表示选择直接后代为其父级。

上述版本在旧版本的Internet Explorer中会失败，所以如果您也希望支持它们，那么等效的支持选择器将是

.parent

Demo （也支持IE7）

但是使用:first-child和:first-of-type有很大的不同，比如你使用的是>而你还有.parent > div:first-child > p:first-child { color: red; }之外的其他元素，你的选择器会失败，所以＆＃39;为什么我为您提供了使用p:first-child

的解决方案

Answer 2

.parent > div:first-child > p:first-child

在这里，这应该适合你

Answer 3

这将是.parent p.interline:first-child或.parent .interline:first-child。

CSS选择孙子中的第一类？

3 个答案: