Question

在尝试弄清楚使用多个伪类分配时（使用p和li内容的示例，我注意到，有时候，添加额外的文本行会产生“打破”＃39的效果;伪类赋值。

e.g。在下面的代码中，第2节中的额外行打破了它（如果它被注释掉，那么一切都很好）。但第1节中的额外行不会破坏它。是什么赋予了？我唯一能想到的可能就是在伪类执行中，li被视为ap（但是以一种草率的方式......例如，如果我在那个额外的行中有一个斜体，那么它仍然不是＆＃39;有色的）。

CSS

/*For Section 1: First italic of all lines = colored */
div.ps1 li i:first-child{
    color: blue;
}

/*For Section 2: All italic of first paragraph = colored */    
div.ps2 p:first-child i {
    color: green;
}

HTML

<h1>Section 1</h1>

<div class="ps1">
    <p> extra line</p>
    <li>What is <i> wrong </i>?   What is actually <i> wrong </i>? </li>
    <li>What is <i> wrong </i>?   What is actually <i> wrong </i>? </li>

</div>

<h1>Section 2</h1>
<div class="ps2">
    <li> extra line</li>        <!-- THIS EXTRA LINE --> 
    <p>What is <i> wrong </i>?   What is actually <i> wrong </i>? </p>
    <p>What is <i> wrong </i>?   What is actually <i> wrong </i>? </p>
</div>

Here是我的代码的缩影。

Answer 1

根据MDN：

：first-child CSS伪类表示作为其父元素的第一个子元素的任何元素。

在第二部分中，p不是.ps2的第一个孩子。

div.ps2 p:first-child i

如果p是.ps2的第一个孩子，则仅选择.ps2 中的第一个p 。如果您想选择第一个<li>，无论是否是第一个孩子，请使用:first-of-type。

JSFiddle with :first-of-type

另外请注意，您的HTML无效，因为列表元素<ul>位于x之外。

就伪类分配而言，li是否被视为p的另一个实例？

CSS

HTML

1 个答案: