一、通配符选择器(*)
通配符选择器是用来选择所有元素
*{}
* {border:1px solid blue;}
二、元素选择器(E)
li{color:#ccc;}
三、类选择器(.className)
.active{color:red;}
只对li标签里 的active类更改li.active{font-size:14px};
同时包含important类和active类 进行修改,注意中间不能有空格.important.active{color:red;}
四、id选择器(#ID)
#first {color: #000;}五、后代选择器(E F)
.parent .ul{background:yellow;}
类名为parent的元素下的所有ul的背景色为yellow
六、子元素选择器(E>F)
子元素选择器只能选择某元素的子元素,其中E为父元素,而F为子元素,其中E>F所表示的是选择了E元素下的所有子元素F。这和后代选择器(E F)不一样,在后代选择器中F是E的后代元素,而子元素选择器E > F,其中F仅仅是E的 子元素 而已
.parent ul{background: yellow;}
E>F的选择就只在子类,孙子就不生效,与E F 选择器的差别七、相邻兄弟元素选择器(E + F)
EF两元素同一个父元素,而且F元素在E元素后面,且相邻,可以使用相邻兄弟元素选择器来选择F元素。.first+.second{background: pink;}
![]()
first类后面的 紧跟着的second类的背景色pink
八、通用兄弟选择器(E 〜 F)
和相邻兄弟元素选择器类似,E和F元素是同一父元素,并且F元素在E元素之后,那(E ~ F )选择器将选中所有E元素后面的F元素。
.first~.second{background: pink;}
first类后面的所有的second类的背景色pink,注意与E+F区别
九、群组选择器(selector1,selector2,...,selectorN)
.first,.second,.third{background: pink;}
first 类和second类还有third类背景色同时变成pink,注意逗号别忘了
.