CSS组合选择符包括各种简单选择符的组合方式,在 CSS3 中包含了四种组合方式:后代选择器、子代选择器、相邻兄弟选择器和后续兄弟选择器。
一、 后代选择器
后代选择器(descendant selector)又称为包含选择器,后代选择器可以选择作为某元素后代的元素。后代选择器以空格分隔。
div p {}
二、 子代选择器
与后代选择器相比,子代选择器(Child selectors)只能选择作为某元素子元素的元素。子代选择器以“>”分隔。
div > p {}
三、 相邻兄弟选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。相邻兄弟选择器以“+”分隔。
div + p {}
四、 后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。后续兄弟选择器以“~”分隔。
div ~ p {}