CSS3新增选择器

一. 序选择器
1.同级别的第几个
格式:
:first-child 选中同级别的第一个标签
:last-child 选中同级别的最后一个标签
:only-child 选中父元素的唯一的子元素标签
:nth-child(n) 选中同级别的第n个标签
:nth-child(odd) 选中同级别的所有奇数标签
:nth-child(even) 选中同级别的所有偶数标签
:nth-child(xn+y) 选中同级别的第xn+y个标签
:nth-last-child(n) 选中同级别的倒数第n个标签

  2.同级别中同类型的第几个
  格式:  
            :first-of-child    选中同级别的同类型的第一个标签
            :last-of-child    选中同级别的同类型的最后一个标签
            :only-of-child    选中父元素的唯一类型的某个标签
            :nth-of-child(n)    选中同级别的同类型的第n个标签
            :nth-of-child(odd)    选中同级别的同类型的所有奇数标签
            :nth-of-child(even)    选中同级别的同类型的所有偶数标签
            :nth-last-of-child(n)    选中同级别的同类型的倒数第n个标签

二.属性选择器
作用:根据指定属性名称找到对应标签,设置属性。
格式:
1.[attribute] 用于选取带有指定属性的元素。
2.[attribute=value] 用于选取带有指定属性和值的元素。
3.[attribute~=value] 用于选取属性值中包含指定词汇的元素。
4.[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
5.[attribute^=value] 匹配属性值以指定值开头的每个元素。
6.[attribute$=value] 匹配属性值以指定值结尾的每个元素。
7.[attribute*=value] 匹配属性值中包含指定值的每个元素。

三.伪元素选择器
1 :first-letter 向文本的第一个字母添加特殊样式。
2 :first-line 向文本的首行添加特殊样式。
3 :before 在元素之前添加内容。
4 :after 在元素之后添加内容。

四.UI元素状态伪类
1 :enabled 如:input:enabled 选择每个启用的 元素。
2 :disabled 如: input:disabled 选择每个禁用的 元素 。
3 :checked 如: input:checked 选择每个被选中的 元素。

五.否定选择器
:not(selector) 如 :not(p) 选择非

元素的每个元素。

六.选择当前文档的根元素
:root 选择文档的根元素。

你可能感兴趣的:(CSS3新增选择器)