Question

我有以下CSS代码：

article ul ul :nth-child(2) {
    border:1px solid black;
}

选择dom树中的第二个元素，而不管树中的深度如何。（但它必须在ul内部，必须在ul内部，必须在article内部）。

但是为什么在这个例子中为什么没有选择第二个项目呢？

article ul ul :nth-child(2) {
  border: 1px solid black;
}

<article>
  <ul>
    <li>this not</li>
    <li>this not</li>
    <ul>
      <li>this not</li>
      <li>this</li>
      <p>
        <li>this not</li>
        <li>why not this?</li>
      </p>
    </ul>
  </ul>
</article>

但是当我将p元素更改为div时，它可以工作。有人可以解释吗？

Answer 1

您的标记无效。 ul可能仅包含li个元素作为其直接后代。此外，li是p的无效子级。 Paragraph tags只能包含phrasing content，不包括li。建议您检查以下代码片段，以查看浏览器如何进行更改以尝试更正标记错误。至少对于chrome，最终将段落标签分成两部分，并将嵌套的li元素与其他元素放在同一级别。

article ul ul :nth-child(2) {
  border:1px solid black;
}

<article>
  <ul>
    <li>this not</li>
    <li>this not</li>
    <ul>
      <li>this not</li>
      <li>this</li>
      <p>
        <li>this not</li>
        <li>why not this?</li>
            </p>
    </ul>
  </ul>
</article>

Answer 2

正如@Huangism已经提到的那样，您的HTML无效。

来自MDN page about ul：

允许的内容：
零个或多个<li>元素，而这些元素通常又包含嵌套的<ol>或<ul>元素。

下面是一个示例，说明如何才能使用您的dom才能正常工作：

article ul ul :nth-child(2) {
  border: 1px solid black;
}

<article>
  <ul>
    <li>this not</li>
    <li>this not</li>
    <li>
      <ul>
        <li>this not</li>
        <li>this</li>
        <li>
          <ul>
            <li>this not</li>
            <li>why not this?</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</article>

CSS`nth-child`行为段落与div？

2 个答案: