01.CSS3选择器详解

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{}