2.选择器

1.常用选择器

//1.通用选择器
*{color: red;}
//元素选择器
p{color: red;}
//类选择器
.class{color: red;}
//id选择器
#class{color: red;}

2.关系选择器

//后代选择器：选择ul里面所有的元素，包括li里面的子元素
ul li{color: red;}
//子元素选择器：只能选择li元素，li里面的子元素不能被选择
ul>li{color: red;}
//相邻选择器：只能选择h3后面最近的一个p元素
h3+p{color: red;}
//兄弟选择器：选择h3后面所有的p元素
h3~p{color: red;}

3.UI伪类选择器

//未被访问
e:link{color: red;}
//已被访问
e:visited{color: red;}
//鼠标悬浮在e元素上
e:hover{color: red;}
//鼠标点击e元素时
e:active{color: red;}

4.属性选择器

//选择有（value属性）和（style属性）的input元素
input[value][style]{color: red;}
//选择有（value属性）且（属性值=vip）的input元素
input[value="vip"]{color: red;}
//选择有（value属性）且（属性值有多个）且（其中一个值=vip）的input元素
input[value~="vip"]{color: red;}
//选择有（value属性）且（属性值以vip开头）的input元素
input[value^="vip"]{color: red;}
//选择有（value属性）且（属性值以vip结尾）的input元素
input[value$="vip"]{color: red;}
//选择有（value属性）且（属性值包含vip）的input元素
input[value*="vip"]{color: red;}
//选择有（lang属性）且（属性值以en开头）且（用-分割）的p元素
p[lang|="en]{color: red;}
<p lang="en-cn">

5.其他选择器

//选择每个被选中的input元素
input:checked{color: red;}
//选择每个被禁用的input元素
input:disabled{color: red;}
//选择每个被启用的input元素
input:enabled{color: red;}
//选择e元素之外的所有元素
:not(e){color: red;}
//选择当前活动的锚点元素
#e:target{color: red;}
//选择拥有焦点的e元素
e:focus{color: red;}
//选择带有指定lang属性的e元素
e:lang(en){color: red;}

6.伪元素选择器

//设置e元素内第一个字符的样式
e:first-letter{color: red;}
//设置e元素内第一行的样式
e:first-line{color: red;}

//设置e元素被选择时的样式
e:selection{color: red;}
//在每个e元素之前插入内容（和content一起使用）
e:before{content: "搜索";}
//在每个e元素之后插入内容（和content一起使用）
e:after{content: url(../img/1.jpg);}

7.伪类选择器

//选择父元素中第n个子元素e
e:nth-child(n){color: red;}
//选择父元素中倒数第n个子元素e
e:nth-last-child(n){color: red;}

//选择li的父元素中的（前6个）li元素
li:nth-child(-n+6){color: red;}
//选择li的父元素中的（第4个li元素之后的所有）li元素
li:nth-child(n+4){color: red;}
//选择li的父元素中的（第3个li元素之后）且（第10个li元素之前的所有）li元素
li:nth-child(n+3):nth-child(-n+10){color: red;}
//选择li的父元素中的（第1,4,7，10···个）li元素
li:nth-child(3n+1){color: red;}

//选择文档的根元素
:root{color: red;}
//选择没有任何子元素的元素e
e:empty{color: red;}

8.伪类选择器的补充

//选择父元素的第一个子元素e
e:first-child{color: red;}
//选择父元素的最后一个子元素e
e:last-child{color: red;}
//选择父元素中仅有的一个子元素e
e:only-child{color: red;}

//选择同类型中第一个同级兄弟元素e
e:first-of-type{color: red;}
//选择同类型中最后一个同级兄弟元素e
e:last-of-type{color: red;}
//选择只有一种类型的子元素e
e:only-of-type{color: red;}
//选择同类型中第n个同级兄弟元素e
e:nth-of-type(n){color: red;}
//选择同类型中倒数第n个同级兄弟元素e
e:nth-last-of-type(n){color: red;}