主题
组合选择器
组合选择器通过描述元素之间的关系,实现更精准的样式控制。常用的组合选择器包括:
后代选择器(空格)
选中某元素内部的所有指定子元素。
示例:div p {}
选中所有div
中的p
元素。子元素选择器(>)
仅选中直接子元素。
示例:ul > li {}
只选中ul
的第一层li
。相邻兄弟选择器(+)
选中紧挨在某元素后面的同级元素。
示例:h2 + p {}
选中紧跟在h2
后的p
。通用兄弟选择器(~)
选中同一级别中在某元素之后的所有指定元素。
示例:h2 ~ p {}
选中所有在h2
后的p
元素。
组合选择器提高了样式控制的灵活性,适用于嵌套结构复杂的网页。