我对于层次选择器的理解~

对HTML页面中的元素使用CSS实现一对一，一对多或者多对一的控制，要用到CSS选择器。在大篇CSS代码中，并没有说明什么样式服务于什么元素，只是在元素中使用了class属性。而class属性本身没有语义，它纯粹是用来为CSS服务的，属于多余属性，并没把样式和元素绑定起来，一个CSS类选择器，文本框可以使用，下拉框也可以使用，甚至按钮也可以使用，这样其实非常混乱， 修改时就不方便，所以CSS3中提倡使用选择器来将样式与元素直接绑定起来，这样的话，在样式中什么样式与什么元素相匹配就会变得一目了然，修改起来也很方便。不仅如此，通过css3选择器我们还可以实现各种复杂的指定， 同时也能大量减少样式表的代码书写量，最终书写出来的样式表也会变得简洁明了。

 

层次选择器	类型	功能描述
E    F	后代选择器	选择匹配的F元素，且F元素被包含在匹配的E元素内
E > F	子级选择器	选择匹配的F元素，且F元素是E元素的子元素
E + F	兄弟选择器	选择匹配的F元素，且F元素是E元素后面紧邻的兄弟元素
E ~ F	通用选择器	选择匹配的F元素，且F元素是E元素后面的所有兄弟元素

后代选择器
格式:祖先元素+空格+后代元素

子级选择器
格式:父级元素+大于号+子级元素

可以说后代选择器包含了子级选择器

兄弟选择器
格式:兄弟元素A+"+"+兄弟元素B
注:选择A元素后的B元素,并且AB必须是紧邻的,即AB之间不许有其他元素

通用选择器
格式:兄弟元素A+"~"+兄弟元素B
选择匹配的B元素,即A元素后面的所有B元素

转载于:https://www.cnblogs.com/qingyijie/p/8052837.html