兄弟选择器* + *和*〜*后面的逻辑是什么？ [英] What is the logic behind sibling selectors * + * and * ~ *?
问题描述
对于此问题，我使用以下标记：
< body&
< p> 1< / p> <！ - 第1段 - >
< p> 2< / p> <！ - 第2段 - >
< p> 3< / p> <！ - 第3段 - >
< / body>
从。
* + * 从文档根开始的任何元素的立即兄弟 - 由于< head> 实际上是身体的前一个兄弟（尽管在代码中不可见）选择器针对主体和最后两个段落，因为第一段不是紧跟在另一个同级元素之后。由于正常流程中块级别后代的 text-decoration 的性质，所有这三个段落都有下划线。
*〜* 这基本上与上面一样，除了使用一般同胞组合器。它会在< head> 后面出现下游同级元素，不是直接的兄弟姐妹。由于< body> 是唯一的同级，这与上面的选择器有相同的效果。第一段由于继承而以斜体显示。
p〜* 选择以下的兄弟元素 a < p> 在您的示例中是最后两个段落。 p + * 样式任何元素是段的直接兄弟，它也将是最后两个< p> 元素。
For this question I'm using the following markup:
<body>
<p>1</p> <!-- Paragraph 1 -->
<p>2</p> <!-- Paragraph 2 -->
<p>3</p> <!-- Paragraph 3 -->
</body>
From the Selectors Level 3 specification, the following selector rules apply:
* any element
E + F an F element immediately preceded by an E element
E ~ F an F element preceded by an E element
Based on this, the following should occur:
body + * { } /* Selects nothing as no elements precede body */
body ~ * { } /* As above. */
p + * { } /* Selects Paragraph 2 and Paragraph 3 as these are preceded by p */
p ~ * { } /* As above. */
* + * { } /* As above. */
* ~ * { } /* As above. */
False!
* + * and * ~ * are somehow able to select Paragraph 1 along with 2 and 3! Paragraph 1 isn't preceded by anything, so should be impossible to access:
body + * { background: #000; }
body ~ * { background: #000; }
p ~ * { color: #f00; }
p + * { font-weight: bold; }
* + * { text-decoration: underline; }
* ~ * { font-style: italic; }
Result:
As you can see, paragraph 1 isn't preceded by the body or a phantom p, yet it is apparently preceded by something. It should have no custom styling applied to it at all, yet is somehow affected by those last two selectors. What is the logic behind this?
* + * Styles any element that is an immediate sibling of any element starting from the document root - Since the <head> is actually an immediate preceding sibling of the body (despite not being visible in your code) this selector targets the body and the last two paragraphs, since the first paragraph isn't immediately following another sibling element. All three paragraphs happened to be underlined due to the nature of text-decoration on block-level descendants in the normal flow.
* ~ * This is basically the same thing as above, except using the general sibling combinator .. it styles downstream sibling element(s) that appear after the <head> regardless of whether they're immediate siblings or not. Since the <body> is the only sibling, this has the same effect as the above selector. The first paragraph is italicized due to inheritance.
p ~ * selects a sibling element that is following a <p> which in your example is the last two paragraphs. p + * styles any element that is immediate sibling of a paragraph, which would also be the last two <p> elements.
这篇关于兄弟选择器* + *和*〜*后面的逻辑是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
