介绍

CSS 选择器：就是指定 CSS 要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

分类

CSS 的选择器分为两大类：基本选择题和扩展选择器。

基本选择器

• 标签选择器：针对一类标签
• ID 选择器：针对某一个特定的标签使用
• 类选择器：针对你想要的所有标签使用
• 通用选择器（通配符）：针对所有的标签都适用（不建议使用）

标签选择器：选择器的名字代表 html 页面上的标签

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述 “共性”，无法描述某一个元素的 “个性”。

举例：

css

【总结】需要注意的是：

（1）所有的标签，都可以是选择器。比如 ul、li、label、dt、dl、input、div 等。

（2）无论这个标签藏的多深，一定能够被选择上。

（3）选择的所有，而不是一个。

ID 选择器：规定用#来定义（名字自定义）

针对某一个特定的标签来使用，只能使用一次。css 中的 ID 选择器以”#” 来定义。

举例：

然后我们在别处使用 id 来引用它：

你好

id 选择器的选择符是 “#”。

任何的 HTML 标签都可以有 id 属性。表示这个标签的名字。这个标签的名字，可以任取，但是：

• （1）只能有字母、数字、下划线。
• （2）必须以字母开头。
• （3）不能和标签同名。比如 id 不能叫做 body、img、a。
• （4）大小写严格区分，也就是说 aa, 和 AA 是两个不同的 ID

另外，特别强调的是：HTML 页面，不能出现相同的 id，哪怕他们不是一个类型。比如页面上有一个 id 为 pp 的 p，一个 id 为 pp 的 div，是非法的！

类选择器：规定用圆点.来定义

针对你想要的所有标签使用。优点：灵活。

基本使用

css 中用.来表示类。举例如下：

然后我们在别处使用 class 来引用它：

你好

与id选择器的区别

和 id 非常相似，任何的标签都可以携带 id 属性和 class 属性。但是 id 属性只能被某一特定标签引用一次

特点

class 属性的特点：

• 特性 1：类选择器可以被多种标签使用。

• 特性 2：同一个标签可以使用多个类选择器。用空格隔开。举例如下

我是一个h3啊

而不能写成：

我是一个h3啊

使用类的思想

（1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。

（2）每一个类要尽可能小，有 “公共” 的概念，能够让更多的标签使用。

如：

然后让每个标签去选取自己想要用的类选择器：

  
段落1
    
段落2
    
段落3

id选择器还是类选择器?

问题：到底用 id 还是用 class？

答案：尽可能的用 class，除非极特殊的情况可以用 id。

原因：id 是 js 用的。也就是说，js 要通过 id 属性得到标签，所以 css 层面尽量不用 id，要不然 js 就很别扭。另一层面，我们会认为一个有 id 的元素，有动态效果。

举例如下：

上图所示，css 和 js 都在用同一个 id，会出现不好沟通的情况。

我们记住这句话：类上样式，id 上行为。意思是说，class属性交给 css 使用，id属性交给 js 使用。

通配符*选择器：

通用选择器，将匹配任何标签。

举例：

后面就不需要进行引用了以上就可以起到” 通配 “的效果了。

高级选择器

• 后代选择器：用空格隔开
• 交集选择器：用.隔开
• 并集选择器（分组选择器）：用逗号隔开
• 伪类选择器

1、后代选择器: 定义的时候用空格隔开

基本使用

举例 1：

空格就表示后代。.div1 p 表示.div1的后代所有的p。

是后代不是儿子

这里强调一下：这两个标签不一定是连续紧挨着的，只要保持一个后代的关联即可。也就是说，选择的是后代，不一定是儿子。

举例：