例如:
div > p.some_class {
/* Some declarations */
}
>
符号到底是什么意思?
最佳答案
>
是 child combinator ,有时被错误地称为直接后代组合子。1
这意味着选择器 div > p.some_class
只匹配 .some_class
中直接嵌套在 div< 中的段落
,而不是嵌套在其中的任何段落。这意味着匹配 div > p.some_class
的每个元素也必然匹配 div p.some_class
,descendant combinator (空间),所以这两者经常被混淆是可以理解的。
比较子组合器和后代组合器的图示:
div > p.some_class {
background: yellow;
}
div p.some_class {
color: red;
}
<div>
<p class="some_class">Some text here</p> <!-- [1] div > p.some_class, div p.some_class -->
<blockquote>
<p class="some_class">More text here</p> <!-- [2] div p.some_class -->
</blockquote>
</div>
哪些元素与哪些选择器匹配?
同时匹配
div > p.some_class
和div p.some_class
此p.some_class
直接位于div
内部,因此在两个元素之间建立了父子关系。由于“child”是“后代”的一种类型,因此根据定义,任何子元素也是后代。因此,这两个规则都适用。只匹配
div p.some_class
此p.some_class
包含在div
中的blockquote
中,而不是div
本身。尽管此p.some_class
是div
的后代,但它不是子代;这是一个孙子。因此,仅应用其选择器中具有后代组合子的规则。
1 许多人更进一步称它为“直接子元素”或“直接子元素”,但这完全没有必要(而且对我来说非常烦人),因为子元素 反正根据定义是直接的,所以它们的意思完全一样。没有所谓的“间接 child ”。
关于css - ">"(大于号)CSS 选择器是什么意思?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3225891/