1.CSS3中追加了3个属性选择器
[属性名^="属性值"]选取属性值以指定内容开头
[属性名$="属性值"]选取属性值以指定内容结尾
[属性名*="属性值"]选取属性值包含指定内容
2.伪类选择器：
a:link 普通的、未被访问的链接
a:visited 用户已访问的链接
a:hover 鼠标指针位于链接的上方
a:active 链接被点击的时刻
- UI元素状态伪类选择器
指定的样式只有当元素处于某种状态时才起作用。
- E:hover,E:focus,E:active,E:checked
//鼠标移入
input[type="text"]:hover{}
//获取焦点
input[type="text"]:focus{}
//鼠标按下不放开
input[type="text"]:active{}
//选中状态设置样式
input[type=checkbox]:checked{}
-
E:enabled,E:disabled 可用不可用的状态
3.伪元素选择器：
- E:first-line{} 第一行
p:first-line{}
- E:first-letter{} 第一个字符
p：first-letter{}
- E:before{} 用于在某元素之前添加一段内容
li:before{}
- E:after{} 用于在某元素之后添加一段内容
li:after{}
- E:first-child{}选中属于其父元素的第一个该元素
li:first-child{}`
- E:last-child{} 选中属于其父元素的最后一个该元素
li:last-child{}
- E:nth-child(n){} 选中属于其父元素第n个该元素,从上向下数
li:nth-child(3){};
//odd表示奇数
li:nth-child(odd){};
//even表示偶数
li:nth-child(even){};
//n还可以写成表达式，可以循环设置
li:nth-child(4n+1){}; 第1,5,9....被选中
- E:nth-last-child(n){} 从下往上数
li:nth-last-child(3){};
- E:onlychild表示其父元素只有一个该元素，唯一的
<ul>
<li>列表1个</li>
</ul>
li:only-child{};
-
E:nth-of-type(n),从前往后数元素类型排序
E:nth-last-of type(n)，从后往前数元素类型排序
之前n是所有标签类型一起排序，而这个是根据元素的标签来单独排序。
4.结构性伪类选择器
- root：将样式绑定在根元素
:root{}
- not:排除这个元素，其余元素指定样式
//div中除了h1标签之外的所有元素
div *:not(h1){}
- empty：没有内容的部分
:empty{}
- target:页面跳转的目标href的指向内容
:target{}
