CSS * 选择器怪异处理答案

【问题标题】：CSS * Selector Weird treatmentCSS * 选择器怪异处理
【发布时间】：2012-03-17 22:13:15
【问题描述】：

我正在对浏览器及其对 css 和 html 代码的处理进行一些研究，对此进行测试并看到奇怪的结果并且无法理解。这是一项研究。所以它不是真正的代码。

我在使用 CSS * 选择器时发现了一个问题。让我解释一下：

见下例：

p * { color:red; }

这意味着一个p元素内的所有标签，必须是红色的。一些例子：

<p>
<div>
text <!-- Must be red but not !-->
</div>
<p>
text <!-- Must be red but not !-->
</p>
<span>
text <!-- Must be red but not !-->
</span>
</p>

请问这些问题有什么原因吗？逻辑原因？

【问题讨论】：

Huh?
@YiJiang 我改了。现在使用 P. 你是对的。 div没问题:D
顺便说一句，曾经有一个 W3C 规范确实允许段落中的块元素。安息吧，XHTML 2。

标签： html css css-selectors

【解决方案1】：

W3 XHTML 验证器会提醒您使用嵌套的p 标签。
想一想：“段中段”。在语法上，p 中的 div 在所有 HTML 标准中都是无效的。此外，当使用符合标准的 HTML 解析器时，不可能将 div 元素放在 DOM 中的 p 内，因为打开的 div 标签会自动关闭 p 元素。您可以查看更多详情here

但是，如果您想为段落中的元素设置样式，您可以使用内联标签，例如 span。

【讨论】：

感谢您的回答。最佳答案。我明白了。

【解决方案2】：

我认为这是因为标记不佳。浏览器倾向于关闭某些标签。你有一个 p 标签包裹着另一个 p 标签。所以浏览器可能会为你关闭它并启动一个新的，这可能会弄乱你的 CSS 选择器。

<p><div>should be red?</div></p>
<p>just text won't be red</p>

【讨论】：

div 也不会是红色的，出于同样的原因。
浏览器“倾向于关闭某些标签”，因为它们必须这样做——这是规范的硬性要求。然而，他们应该如何处理示例中悬空的</p>，这是另一回事。