css3有哪些层次选择器

本篇内容介绍了“css3有哪些层次选择器”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

属于css3层次选择器的有：1、后代选择器“E F”，选择E元素的全部后代F元素；2、子元素选择器“E>F”，选择E元素下的全部子元素F；3、相邻兄弟元素选择器“E+F”，选择紧接在E元素后的元素F；4、兄弟选择器“E~F”。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

后代选择器（E F）

后代选择器也被称做包含选择器,所起做用就是能够选择某元素的后代元素，好比说:E F，前面E为祖先元素，Ｆ为后代元素，所表达的意思就是选择了Ｅ元素的全部后代Ｆ元素，请注意他们之间须要一个空格隔开。这里Ｆ无论是E元素的子元素或者是孙元素或者是更深层次的关系，都将被选中，换句话说，不论Ｆ在Ｅ中有多少层关系，都将被选中：浏览器

.demo li {color: blue;}

上面表示的是，选中div.demo中全部的li元素spa

全部浏览器都支的后代选择器。3d

子元素选择器(E>F)

子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E>F所表示的是选择了Ｅ元素下的全部子元素Ｆ。这和后代选择器（Ｅ Ｆ）不同，在后代选择器中Ｆ是Ｅ的后代元素，而子元素选择器Ｅ > F，其中Ｆ仅仅是Ｅ的子元素而以。blog

ul > li {
background: green;
color: yellow;
}

上在代码表示选择ul下的全部子元素li。如：bfc

IE6不支持子元素选择器。im

相邻兄弟元素选择器(E + F)

相邻兄弟选择器能够选择紧接在另外一元素后的元素，并且他们具备一个相同的父元素，换句话说，EF两元素具备一个相同的父元素，并且Ｆ元素在Ｅ元素后面，并且相邻，这样咱们就可使用相邻兄弟元素选择器来选择Ｆ元素。demo

li + li {
background: green;
color: yellow; 
border: 1px solid #ccc;
}

上面代码表示选择li的相邻元素li，咱们这里一共有十个li，那么上面的代码选择了从第2个li到 10 个li，一共九个，请看效果：db

由于上面的li+li其中第二li是第一li的相邻元素，第三个又是第二个相邻元素，所以第三个也被选择，依此类推，因此后面九个li都被选中了，若是咱们换过一种方式来看，可能会更好的理解一点：img

.active + li {
background: green;
color: yellow; 
border: 1px solid #ccc;
}

按照前面所讲的知识，这句代码很明显选择了li.active后面相邻的li元素，注意了和li.active后面相邻的元素仅只有一个的。如图：di

IE6不支持这个选择器

通用兄弟选择器（E ~ F）

通用兄弟元素选择器是CSS3新增长一种选择器，这种选择器将选择某元素后面的全部兄弟元素，他们也和相邻兄弟元素相似，须要在同一个父元素之中，换句话说，E和F元素是属于同一父元素以内，而且F元素在Ｅ元素以后，那么E ~ F 选择器将选择中全部Ｅ元素后面的Ｆ元素。好比下面的代码：

.active ~ li {
background: green;
color: yellow; 
border: 1px solid #ccc;
}

上面的代码所表示的是，选择中了li.active 元素后面的全部兄弟元素li,如图所示：

通用兄弟选择器和相邻兄弟选择器极其类似，只不过，相邻兄弟选择器仅选择是元素的仅与其相邻的后面元素（选中的仅一个元素）；而通用兄弟元素选择器，选中的是元素相邻的后面兄弟元素，这样提及来可能会有迷糊，你们能够仔细看看其相邻兄弟的效果图。

IE6不支持这种选择器的用法。

“css3有哪些层次选择器”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！