例如, div > p
可以被用于选择所有<p>
它们是直接子元素<div>
元素。 它是有效使用div > p > span
选择<span>
元素具有<p>
父和<div>
祖父母?
怎么样在CSS选择其他运营商? 它是有效的使用'+' div + p + span
或''在div, p, span
?
如何结合不同的选择? 像div + p > span
?
例如, div > p
可以被用于选择所有<p>
它们是直接子元素<div>
元素。 它是有效使用div > p > span
选择<span>
元素具有<p>
父和<div>
祖父母?
怎么样在CSS选择其他运营商? 它是有效的使用'+' div + p + span
或''在div, p, span
?
如何结合不同的选择? 像div + p > span
?
需要注意的是选择器不使用的术语“经营者”。 所述>
和+
符号被更准确地称为组合子 ,而逗号是仅用于一个符号组选择到一个列表 ,并且以相同的类别作为不属于>
和+
组合子。
作为选择电平4的,组合子定义两个元件之间的关系,因此它们确实是二进制的。 你的确可以使用>
或+
多次连续指祖父母或其他相邻的兄弟姐妹。 例如, div > p > span
表示以下HTML片段:
<div>
<p>
<span></span>
</p>
</div>
而div + p + span
表示下面的片段:
<div></div>
<p></p>
<span></span>
你也可以混合和匹配组合子来表示,甚至更复杂的结构。 例如, div + p > span
表示<span>
的父是<p>
这又直接跟随一个<div>
如由下面的片段给出:
<div></div>
<p>
<span></span>
</p>
围绕开关组合子, div > p + span
表示<span>
直接遵循<p>
这又是一个子<div>
<div>
<p></p>
<span></span>
</div>
请注意如何这意味着, 无论是<span>
和<p>
是一样的孩子<div>
但请记住,每一个复杂的选择目标最右边的元素(被称为选择的主题)。 不幸的是,这加上组合子是二进制意味着并不是所有的结构可以被表示。 见我的回答这个问题,对于这两个概念的一个非常深入的解释,为什么这种限制产生的结果。
你也可以使用,
多次组尽可能多的选择在一起,只要你喜欢,但这又是从组合子的概念分开。 不同之处在于组合子链接元件一起以形成表示单一粘结结构的复合选择器,而逗号组的多个复杂的选择成用于方便起见一个CSS规则。