Html CSS在孙辈中选择第一种类型？

我读过一些棘手的问题，比如或，但我的问题与这些不符

我有这个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下的第一个孙子

---

如何操作？

您还需要选择第一个

div

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

在上面的选择器中，我选择嵌套在第一个

div

中的第一个

p

元素，该元素进一步嵌套为具有

类的
元素的直接子元素

表示选择其父代的直接子代


在旧版本的Internet Explorer中，上述操作将失败，因此，如果您也希望支持它们，那么将使用同等支持的选择器

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

（也支持IE7）

但是使用and有很大的区别，假设您使用的是
p:first child
，并且除了
p
之外还有其他元素，那么您的选择器将失败，这就是为什么我为您提供了使用
:first of type
的解决方案

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

给你，这应该适合你
应该是
.parent p.interline:first child
或
.parent.interline:first child
 它必须是针对您所要求的（任意元素的第一个任意孙子）的通用解决方案，还是仅针对您的代码？为此，您可以使用
p.interline:first child
。我尝试了
p.interline:first child
，但没有成功，因为，如下面的答案所示，我也应该选择第一个
，但我没有。您好@shecodes，欢迎访问该网站！这看起来是一个很好的开始。你能补充一下为什么这个答案是正确的吗？如上所述，没有起作用，因为每个
div
的第一个
p
-子项都被选中。你好@Kazark，谢谢你的欢迎@maxyme您可以使用
.parent div:first child.interline:first child{color:red；}
或上面选择的答案：）