CSS组合选择符的后代选择器、子代选择器和兄弟选择器

CSS组合选择符包括各种简单选择符的组合方式,在 CSS3 中包含了四种组合方式:后代选择器、子代选择器、相邻兄弟选择器和后续兄弟选择器。

一、 后代选择器

后代选择器(descendant selector)又称为包含选择器,后代选择器可以选择作为某元素后代的元素。后代选择器以空格分隔。

div p {}

二、 子代选择器

与后代选择器相比,子代选择器(Child selectors)只能选择作为某元素子元素的元素。子代选择器以“>”分隔。

div > p {}

三、 相邻兄弟选择器

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。相邻兄弟选择器以“+”分隔。

div + p {}

四、 后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。后续兄弟选择器以“~”分隔。

div ~ p {}

Leave a Reply

Your email address will not be published. Required fields are marked *