比较全面的 CSS 选择器总结

通配符选择器

* { ... }
/* 与任何元素匹配 */

元素选择器

• 定义：

E { ... }  /* E 表示 HTML 的元素名 */ 
div {
   	width:30px;
   	height:30px;
}

伪元素选择器

• 特点：只针对 CSS 中已有的伪元素起作用
• 定义：

:first-letter  对指定对象内的第一个字符起作用,仅对块元素起作用
:first-line 对指定对象内的第一行内容起作用,仅对块元素起作用
:before 
:afte

before 和 after 两个选择器需要结合和内容相关的属性使用，后面我单独写文章总结。

属性选择器

• 定义：

E[attr] { ... } /* 表示针对具有 attr 属性的 E 元素起作用 */
div[id] {
	width:30px;
	height:30px;
}

元素选择器的一些匹配规则：

• 元素包含 attr 属性，且 attr 属性值为 value

E[attr=value] { ... }

• 元素包含 attr 属性，且 attr 属性值为 value,或包含 attr2 属性，且 attr2 属性值为 value2

E[attr1=value1][attr2=value2] { ... }

• …，属性值为以空格隔开的系列值，其中某个值为 value

E[attr~=value] { ... }

• …，属性值为以连字符隔开的系列值，第一个值为 value

E[attr|=value] { ... }

• …，属性值为以 value 开头的字符串

E[attr^=value] { ... }

• …，属性值为以 value 结尾的字符串

E[attr$=value] { ... }

• …，属性值为包含 value 的字符串

E[attr*=value] { ... }

ID 选择器

• 定义：

#idValue { ... } 
/* 表示对 id 为 idValue 的 HTML 元素起作用 */

类选择器

定义：

.classValue { ... } 
/* 对 class 属性值为 classValue 的元素起作用 */

伪类选择器

• 特点：与伪元素选择器类似，主要用于对已有的选择器做出进一步限制，对已有选择器能匹配的元素做进一步的过滤。
• 分类：结构性伪类选择器、UI元素状态伪类选择器、其他伪类选择器
  具体介绍另写文章详述。

不同选择器组合成的选择器

• 元素选择器与 ID选择器组合

E#idValue { ... }  
/* 对 id 属性为 idValue 的 E 元素起作用 */

• 元素选择器与类选择器组合

[E].classValue { ... }  
/*  对 class 属性为 classValue 的E 元素起作用 */

选择器按照关系组合成的选择器

• 包含选择器

Selector1 Selector2 { ... } 
/* 对所有包含在 Selector1 内部的 Selector2 选择器起作用 */

• 子选择器

Selector1>Selector2 { ... } 
/* 对所有包含在 Selector1 内部，且要求 Selector2 对应的元素必须是 Selector1 对应的元素的直接子元素才起作用 */

• 兄弟选择器

Selector1 ~ Selector2 { ... } 
/* 对 Selector1 对应的元素后面（不包含对应元素），且属于 Selector2 作用范围的元素起作用 */

• 组合

Selector1,Selector2 { ... } 
/* 对所列选择器，只要匹配其中任意一个的元素起作用 */