为什么邻居兄弟选择器不工作？ [英] Why doesn't the adjacent sibling selector work?
问题描述
根据邻接兄弟选择器的定义，下面的代码应该可以工作。但事实并非如此。我似乎没有发现任何错误。
<！DOCTYPE html>
< html>
< head>
< style>
＃p2 + h4 {
颜色：红色;
}
< / style>
< / head>
< body>
< p>
< p id =p2>这是所选para的同级< / p>
< p>
< h4>这不应该着色< / h4>
< / p>
< h4>这应该是彩色的< / h4>
< / p>
< / body>
< / html>
您的html无效。 p 元素允许的内容为短语内容。附加的CSS邻接兄弟选择符按照以下规则进行选择：
lockquote
相邻兄弟选择符的语法如下：E1 + E2，其中
E2是选择者的主题。如果E1和E2
共享文档树中的相同父项，并且E1紧接在
E2之前，则选择器匹配，忽略非元素节点（如文本节点和注释）。
在id 这是可行的，因为一般的兄弟选择符根据以下规则进行选择： 以下同胞组合子由代字符（U + 007E，〜） 这里id 参考文献： =https://www.w3.org/TR/CSS21/selector.html#adjacent-selectors =nofollow noreferrer>邻接兄弟选择器 According to the definition of adjacent sibling selector the following code should work. However it does not. I don't seem to find any mistake.
Your html is invalid. Adjacent sibling selectors have the following syntax: E1 + E2, where
E2 is the subject of the selector. The selector matches if E1 and E2
share the same parent in the document tree and E1 immediately precedes
E2, ignoring non-element nodes (such as text nodes and comments). in your example element with id
This will work because general sibling selector selects according to the following rule: The following-sibling combinator is made of the "tilde" (U+007E, ~)
character that separates two sequences of simple selectors. The
elements represented by the two sequences share the same parent in the
document tree and the element represented by the first sequence
precedes (not necessarily immediately) the element represented by the
second one. here element with id Take a look also Difference between the selectors div + p (plus) and div ~ p (tilde) References: 这篇关于为什么邻居兄弟选择器不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！＃p2 的示例元素中不会立即位于 h4 。您可以修复您的html并使用常规兄弟选择器：
＃p2〜h4 {color：red;} < div> < p id =p2>这是所选para的同级< / p> < DIV> < h4>这个不应着色< / h4> < / DIV> < h4>这应该是彩色的< / h4>< / div>
字符，用于分隔两个简单选择器序列。由两个序列表示的
元素在
文档树中共享同一父元素，并且由第一个序列
表示的元素在
表示的元素之前（不一定是立即）第二个。
＃p2 的元素与第二个元素 h4 在html中，但不是第一个元素。
<!DOCTYPE html>
<html>
<head>
<style>
#p2+h4{
color:red;
}
</style>
</head>
<body>
<p>
<p id="p2">This is the sibling of the selected para</p>
<p>
<h4>this should not be colored</h4>
</p>
<h4>this should be colored</h4>
</p>
</body>
</html>
p element permitted content is phrasing content. Additional css adjacent sibling selector selects following the rule:
#p2 is not immediately precedes h4. You can fix your html and use general sibling selector:#p2 ~ h4 {
color: red;
}<div>
<p id="p2">This is the sibling of the selected para</p>
<div>
<h4>this should not be colored</h4>
</div>
<h4>this should be colored</h4>
</div>
#p2 shares the same parent with second element h4 in html but not with the first.
