例如:
div > p.some_class { /* Some declarations */ }
这个>标志到底是什么意思?
>
>是子组合器,有时会误称为直接后代组合器。1个
这意味着选择器div > p.some_class仅选择 直接.some_class嵌套 在内 的div段落,而不选择嵌套 在 其 内 的任何段落。
div > p.some_class
.some_class
div
插图:
<div> <p class="some_class">Some text here</p> <!-- Selected [1] --> <blockquote> <p class="some_class">More text here</p> <!-- Not selected [2] --> </blockquote> </div>
选择了什么,没有选择什么:
选择 这p.some_class直接位于内部的div,因此在这两个元素之间建立了父子关系。
p.some_class
没有选择 这p.some_class是由包含blockquote内div,而不是div本身。尽管这p.some_class是的后代div,但它不是孩子。是孙子
blockquote
因此,虽然div > p.some_class不匹配此元素,但divp.some_class将使用后代组合器。
divp.some_class
1 许多人甚至将其称为“直子”或“直子”,但这是完全没有必要的(对我来说是令人讨厌的),因为 从定义 上来说,子元素 始终是直接的 ,因此它们的含义完全相同。没有所谓的“间接孩子”。