CSS派生选择器怎么理解

本文小编为大家详细介绍“CSS派生选择器怎么理解”，内容详细，步骤清晰，细节处理妥当，希望这篇“CSS派生选择器怎么理解”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

派生选择器，乍一看名字不知所云，它又名上下文选择器，它是使用文档DOM结构来进行css选择的。DOM结构在此不再赘述了，但为了更加清楚地说明问题，我们这里给出一个DOM树作为参考：

(1)后代选择器(descendant selector)

如上图，如果想要选择body元素的所有li子元素，方法如下：

body li { ...}

这里会选择所有的li后代，也就是图中的body下的所有li，不论他们之间相隔的代数有多少。同理，如果想要选择h2元素下的span，可以使用以下代码：

h2 span { ...}

如果我们要选择拥有warning类的元素的li后代，可以使用下面的方法：.warning li { ...}

当然，如果希望只选择拥有warning类的div元素的li后代，可以写作：div.warning li { ...}

由上面的例子不难看出，后代选择器的规则就是用空格连接2个或多个选择器。空格的含义为：…的后代。多个选择器的情况如下： ul li li { ...}

这样，就会选择所有ul下包含在li元素下的所有li元素了，听起来十分拗口，参考我们的DOM树，会选择到文档树种最后一排li元素。

(2)子元素选择器(child selector)

子元素选择器和后代选择器不同，它只能选择某元素的直接后代，不能跨代选取，用法如下：ul > li { ...}

两个子元素中间用一个大于号>连接。上面的代码会选择到所有ul元素的直接li子元素。对应到DOM树中，所有的li元素都会被选中，原因是图中所有的li元素都是ul的子元素。

但是，以下代码将不会选中任何元素：h2 > span { ...}

由于span是h2的”孙子元素”，h2没有直接的span子元素，因而上面的代码将不会选到任何结果。其他方面和后代元素类似，需要特别注意的就是子元素选择器不能隔代选取。

(3)相邻兄弟选择器(Adjacent sibling selector)

相邻兄弟选择器，故名思意将会选取某个元素的相邻兄弟元素，注意它选取的是相邻的兄弟元素而不是所有的兄弟元素，实际上选取的是紧跟在后面的兄弟元素。

相邻兄弟选择器在实践中有比较不错的应用，例如，你想在一个h3标题后面的段落应用某种独到的样式或者希望在某类p段落后的table上添加一个额外的边距等等。它的用法如下：

li + li { ...}

以上代码会选择所有作为li相邻元素的li元素，听起来又有点拗口，参考DOM树，它会选择除了排在第一个li元素的其余4个li元素，因为2个排在第1的li元素没有更靠前的兄弟元素来选择它。

再比如：h2 + p { ...} 会选择所有紧跟h2后面的p兄弟元素。h2.warning + p { ...} 会选择所有有用warning类的h2元素后面紧跟的p兄弟元素。

(4)几种派生选择器的结合使用

实际上，以上介绍的几种派生选择器可以结合使用，看下面的例子：

html > body li.warning + li { ...}

上面的选择器含义为：html元素的body子元素中，所有拥有warning类的li元素的相邻兄弟元素。

读到这里，这篇“CSS派生选择器怎么理解”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。