兄弟选择器*+*和*〜*背后的逻辑是什么？
Jam*_*lly 22 html css css-selectors css3
对于这个问题,我使用以下标记:
<body>
<p>1</p> <!-- Paragraph 1 -->
<p>2</p> <!-- Paragraph 2 -->
<p>3</p> <!-- Paragraph 3 -->
</body>
从选择器级别3规范,以下选择器规则适用:
* any element
E + F an F element immediately preceded by an E element
E ~ F an F element preceded by an E element
基于此,应该发生以下情况:
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. */
假!
* + *并* ~ *以某种方式能够选择第1段以及2和3!第1段之前没有任何内容,因此无法访问:
body + * { background: #000; }
body ~ * { background: #000; }
p ~ * { color: #f00; }
p + * { font-weight: bold; }
* + * { text-decoration: underline; }
* ~ * { font-style: italic; }
结果:
正如你所看到的那样,第1段之前没有body幻像或幻像p,但它显然先于某种东西.它应该没有应用任何自定义样式,但在某种程度上受到最后两个选择器的影响.这背后的逻辑是什么？
adr*_*ift 21
* + *对从文档根开始的任何元素的直接兄弟的任何元素进行样式化 - 因为<head>它实际上是正文的前一个兄弟(尽管在代码中不可见),这个选择器的目标是正文和最后两段,因为第一段不是紧跟另一个兄弟元素.由于text-decoration正常流程中块级后代的性质,所有三个段落都被强调了.
* ~ *除了使用一般的兄弟组合器之外,这基本上与上面的相同.它调整了下一个兄弟元素的样式<head>,无论它们是否是直接的兄弟姐妹.由于<body>是唯一的兄弟,这与上面的选择器具有相同的效果.第一段由于继承而用斜体表示.
p ~ *选择被一个兄弟元素下一个<p>它在你的例子是最后两段.p + *设置任何段落的直接兄弟元素,也可以是最后两个<p>元素.
- 此外,re:"包括身体和*所有*的后代":这些选择器不会因为他们跟随头而选择*所有身体的后代,因为他们只选择*兄弟姐妹*跟随他们的*兄弟*.然而,正如@BoltClock指出的那样,身体的后代可以继承身体的造型. (2认同)
Sim*_*tsa 20
它们实际上不适用于第一段.为了证明这一点,让我们稍微改变一下样式表:
* + * { border-right: solid red }
* ~ * { border-left: solid black; }
它们都应用于"body"元素,实际上前面是"head".