CSS选择器

CSS选择器

​ 有人将HTML比作英语的名词，CSS比作英语的形容词，JS比作英语的动词。CSS全称叫做级联样式表，CSS的作用就是给HTML文档中的标签添加装饰。在嵌入样式和外部样式中要将CSS的修饰赋予指定的标签上就必须使用CSS选择器来寻找HTML文档中的指定标签然后再赋予样式，所以CSS选择器的作用就是用来定位HTML标签。

1.上下文选择器

格式：

标签1 标签2 {声明}

在这里标签1必须是标签2的祖先（不一定是父标签），这一条语句选中的是标签2。

2.子类选择符>

格式：

标签1 > 标签2 {声明}

这里标签1必须是标签2的父标签，同样的上一条语句的选择的是标签2。

3.紧邻同胞选择符+

格式：

标签1 + 标签2 {声明}

标签1必须是标签2的兄弟标签而且标签2必须紧跟着标签1，上一条语句的选择的是标签2。

4.一般同胞选择符~

格式与示例：

标签1 ~ 标签2 {声明}

标签1必须是标签2的兄弟标签，而标签2相对于标签1没有严格的限制，上一条语句的选择的是标签2。

5.通用选择符

格式：

标签1(可以省略) * {声明}

上一条语句代表选中标签1中的所有标签，当标签1被省略时，代表着选中HTML文档中的所有标签。

6.ID选择器

格式：

#ID选择器的名字 {声明}

HTML文档中的每一个标签要么没有ID属性，如果有就必须保证与文档中其它标签的ID属性值不同，在ID选择器中CSS会选择HTML文档中ID值相同的标签。ID通常会作为一个标签的唯一标识，方便js去寻找标签，进行相关操作。

7.类选择器

格式：

.类选择器的名字 {声明}

类选择器可以批量的为不同的标签赋予相同的样式。在HTML文档中，不同的标签可以拥有相同的类值。

8.属性名选择符

格式：

标签名 [属性名]

选择任何带有属性名的标签。

9.属性值选择符

格式：

标签名 [属性名="属性值"]

选择任何带有值为属性值的属性名的标签名。

参考：《CSS设计指南(第3版)》