CSS 选择器

发表于 更新于 分类于
CSS选择器

CSS3 选择器的分类

  1. 基础选择器

  2. 层次选择器

  3. 伪类选择器

  4. 伪元素选择器

  5. 属性选择器

基础选择器

选择器 类型
* 通配选择器
E 标签选择器
#id ID 选择器
.class 类选择器
selector1,selectorN 群组选择器

层次选择器

选择器 类型
X Y 后代选择器
X > Y 子选择器
X + Y 相邻兄弟选择器
X ~ Y 通用兄弟选择器

伪类选择器

动态伪类选择器

选择器 类型
E:link 超链接伪类选择器
E:visted 超链接伪类选择器
E:active 用户行为伪类选择器
E:hover 用户行为伪类选择器
E:focus 用户行为伪类选择器

目标伪类选择器

1
2
3
#about:target{

}

语言伪类选择器

1
2
3
E:lang(en){

}

UI 元素状态伪类选择器

选择器 类型
E:checked 选中状态伪类选择器
E:checked 启用状态伪类选择器
E:disabled 不可用状态伪类选择器

结构伪类选择器

选择器 功能描述
E:first-child 匹配父元素中包含的第一个名称为 E 的子元素，与 E:nth-child (1) 相同
E:last-child 匹配父元素中包含的最后一个名称为 E 的子元素，与 E:nth-last-child (1) 相同
E:root 选择匹配元素 E 所在文档的根元素
E F:nth-child 选择父元素 E 中所包含的第 n 个子元素 F，其中 n 可以是整数 (1、2、3)、关键字（even、odd）,也可以是公式（2n + 1,-n+）
E F:nth-last-child 选择父元素 E 中所包含的倒数第 n 个子元素 F
E:nth-of-type(n) 选择父元素中所包含的具有指定类型的第 n 个 E 元素
E:nth-last-of-type(n) 选择父元素中所包含的具有指定类型的倒数第 n 个元素
E:first-of-type 选择父元素中所包含的具体指定类型的第一个 E 元素，与 E:nth-of-type (1) 等同
E:last-of-type 选择父元素中所包含的具有指定类型的最后一个 E 元素，与 E:nth-last-of-type (1) 等同
E:only-child 选择父元素中所包含的唯一一个子元素 E
E:only-of-type 选择父元素中所包含的唯一一个同类型的同级兄弟元素 E
E:empty 选择不包含任何子元素的 E 元素，并且该元素也不包含任何文本节点

否定伪类选择器

1
2
3
E:not(F){

}

伪元素

  • ::first-letter

  • ::first-line

  • ::before和::after

  • ::selection

属性选择器

选择器 功能描述
E[attr] 选择匹配具有属性 attr 的 E 元素
E[attr=val] 选择匹配具有属性 attr 的 E 元素，并且 attr 的属性值为 val
E[attr|=val] 选择匹配 E 元素，并且 E 元素定义了属性 attr,attr 属性值是一个具有 val 或者 val - 开始的属性值。
E[attr~=val] 选择匹配 E 元素，并且 E 元素定义了属性 attr,attr 属性值具有多个空格分隔的值
E[attr*=val] 选择匹配 E 元素，并且 E 元素定义了属性 attr, 其属性值任意位置包含了 val
E[attr^=val] 选择匹配 E 元素，并且 E 元素定义了属性 attr, 其属性是以 val 开头的任意字符串
E[attr$=val] 选择匹配 E 元素，并且 E 元素定义了属性 attr, 其属性值是以 val 结尾的任意字符串