CSS 选择器

1. 元素选择器

元素选择器是最基本的选择器，可以选择html的元素

例如: h1 { color: gray; } 所有的h1的标题颜色都会变为灰色。

2. 类选择器

选择class属性为某值的元素

.classname { }

例如: .warning { color: red } 将会选择所有class中含有warning的元素

3. ID选择器

选择id属性为某值的元素

#id {}

例如 #warning { color: red } 将选择id为warning的元素

4. 选择器分组

即对多个不同的选择器，可以应用同一个声明，多个选择器用‘,’隔开

例如：h1, p { color: red; }, 将对文档中所有的h1元素和p元素都应用该规则

5. 多类选择器

多个类选择器连接在一起，仅选择同时包含这些类名的元素。

例如：.warning.urgent { color: red; },class中包含warning，同时包含urgent的元素。可能为<p class="warning urgent"/>或者<p class="urgent warning"/>或者<p class="urgent warning otherclass" />

6. 属性选择器

根据元素的属性以及属性值来选择元素。

6.1 简单属性选择器

选择有某个属性的元素，而不论元素的值是什么。

例如：h1[class]，所有有class属性的h1元素都会被选中

6.2 更加具体属性值选择

只选择有特定属性值的元素。

例如: a[href=“www.baidu.com”]，只选择了a的href属性为"www.baidu.com"的a元素

6.3 多个属性同时选择

同时具有多个属性的元素。

例如: a[href][title], 选择同时具有href和title的a元素

6.4 根据部分属性值选择

类型	描述
[foo~=“bar”]	选择foo属性值中包含bar的"独立单词"的所有元素 例如<a foo="bar">或者<a foo="bar test" />但不能是<a foo="barbar"/>
[foo^=“bar”]	选择foo属性值以bar开头的所有元素
[foo$=“bar”]	选择foo属性值以bar结尾的所有元素
[foo*=“bar”]	选择foo属性值含有bar的所有元素

7. 使用文档结构选择

7.1 后代选择器

用空格分隔多个选择器，空格是一种结合符，表示”…在…中找到“

例如: h1 em { color: gray; }，表示找到h1元素后代中的所有em 元素

7.2 子元素选择

用 > 分隔多个选择器，表示选择元素的子元素

例如: h1>em { color: gray; }，表示选择作为h1元素子元素的所有em 元素

7.3 相邻兄弟元素

用 + 分隔多个选择器，表示选择紧接在另一个元素后的元素，并且二者有相同的父元素。

例如：h1 + em { color: gray; }，紧接着h1的所有em元素，并且他们有相同的父元素

8. 伪类和伪元素

8.1 伪类

8.1.1 链接伪类

两个只对含有href的a元素生效的伪类。

:link，指向一个未被访问的地址的a元素

:visited 指示作为已访问地址超链接的所有a元素

8.1.2 动态伪类

:focus 指示当前拥有输入焦点的元素

:hover 指示鼠标停留在哪个元素上

:active 指示被用户输入的元素

8.1.3 选择第一个子元素

:first-child 选择元素的第一个子元素

8.1.4 结合伪类

在同一个选择器中结合使用伪类。

例如: a:link:hover { color: red; } 鼠标停留在未访问的链接上。

8.2 伪元素

:first-letter

:first-line

:before

:after