Question

当我执行以下操作时，只有“名人”这个词会变成红色。

body > p * {
  background-color: red;
}

<body>
  <p>I have met many <span>Celebrities</span> in my lifetime.
    <p>They</p> all were rich! I have a list
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </p>
</body>

为什么，'名人'，红色中唯一的东西？

根据我对后代选择器的理解，第一个内的<ul>，和应为红色，对吧？

如果我修改上面的内容如下，那么为什么？

body > div * {
  background-color: red;
}

<div>I have met many <span>Celebrities</span> in my lifetime.
  <p>They</p> all were rich! I have a list
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</div>

Answer 1

p标签不能嵌套在其他p标签内。当它解析你的标记时，它会在嵌套的p标记之前插入一个（缺少的）结束p标记。

<p>I have met many <span>Celebrities</span> in my lifetime. <p>
<p>They</p>

Answer 2

这是你的代码：

<p>I have met many <span>Celebrities</span> in my lifetime.
    <p>They</p> all were rich! I have a list 
    <ul>
       <li>one</li>
       <li>two</li>
       <li>three</li>
    </ul>
</p>

但是，由于HTML无效，这就是浏览器解析它的方式：

注意顶级段落元素在下一段开始之前是如何关闭的。

此行为实际上是在规范中定义的：

4.4.1 The p element

在text / html中标记省略

如果p元素是，则p元素的结束标记可以省略   紧接着是address，article，aside，   blockquote，div，dl，fieldset，footer，form，h1，h2，   h3，h4，h5，h6，header，hgroup，hr，main，{{ 1}}，nav，   ol，p，pre，section或table，元素，或者如果没有   父元素和父元素中的更多内容不是   ul元素。

换句话说，当跟在a或其他div后，段落元素不需要结束标记，因为浏览器会假定结束标记。

浏览器还为末尾的迷路p标记提供了开始标记。

这就是你的后代选择器无法工作的原因。 CSS被迫将这些元素视为兄弟，而不是后代。

根据规范，paragraph element只能包含措辞内容。

3.2.4.1.5 Phrasing content

短语内容是文档的文本，以及元素   在段落内标记该文本。短语的运行   内容形式段落。

，a，code，span和input是措辞内容的示例。

textarea和p不是措辞内容。它们是流量内容：

3.2.4.1.2 Flow content

文档和应用程序正文中使用的大多数元素   被归类为流量内容。

ul，article，section，footer，div和p是流内容的示例

您的第二个示例有效，因为容器是div，可以包含流内容。

定位段落<p>元素的后代

2 个答案: