Question

据我所知，CSS中的一般兄弟选择器选择一个元素的降序兄弟。

请考虑以下代码：

<head>
<style>
h3 ~ div {
    color: #FF00FF;
}
</style>
</head>
<body>
    <h3>Header 3</h3>
    <div>Sibling divivion</div>
    <p>
        <p>Nested paragraph</p>
        <div>Nested division</div>
    </p>
</body>

我希望一般的兄弟选择器能够针对作为div元素的h3的所有降序兄弟。

有人可以解释为什么＆＃34;嵌套分区＆＃34;被选中了？我不认为这是h3的兄弟姐妹吗？

Answer 1

div实际上是h3元素的兄弟。您在p元素中不能拥有div元素和p元素：

＆＃34; P元素代表一个段落。它不能包含块级元素（包括P本身）。＆＃34;

参考：9.3.1 Paragraphs: the P element

当浏览器遇到第二段时，它将结束第一段，因此第二段和div元素在第一段之后结束：

<h3>Header 3</h3>
<div>Sibling divivion</div>
<p></p>
<p>Nested paragraph</p>
<div>Nested division</div>
<p></p>

段落的结束标记是可选的，因此段落以结束标记结束，或者以下一个块元素开始的位置结束。第一段的预期结束标记缺少一个起始标记，最终作为单独的段落。

一般兄弟选择器 - 奇怪的行为

1 个答案: