对于这个问题,我使用了以下标记:
<body>
<p>1</p> <!-- Paragraph 1 -->
<p>2</p> <!-- Paragraph 2 -->
<p>3</p> <!-- Paragraph 3 -->
</body>
来自Selectors Level 3 specification , 以下选择器规则适用:
* 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
,但显然前面有一些东西。它根本不应该应用任何自定义样式,但会以某种方式受到最后两个选择器的影响。这背后的逻辑是什么?
最佳答案
* + *
为从文档根开始的任何元素的直接兄弟元素设置样式 - 自 <head>
实际上是正文的前一个同级元素(尽管在您的代码中不可见)此选择器以正文和最后两段为目标,因为第一段没有紧跟在另一个同级元素之后。由于 text-decoration
的性质,这三段恰好都带有下划线。在正常流程中的 block 级后代上。
* ~ *
这基本上与上面相同,除了使用 general sibling combinator。 .. 它为出现在 <head>
之后的下游兄弟元素设置样式不管他们是不是直系 sibling 。自 <body>
是唯一的兄弟,这与上面的选择器具有相同的效果。由于继承,第一段用斜体显示。
p ~ *
选择一个 在 <p>
之后的兄弟元素在你的例子中是最后两段。 p + *
为段落的直接兄弟元素设置样式,这也将是最后两个 <p>
元素。
关于html - 兄弟选择器 * + * 和 * ~ * 背后的逻辑是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16695556/