文章目录

• • • 2.1 CSS选择器的作用
    • 2.2 CSS选择器分类
    • 2.3 CSS 基础选择器分类
    • 2.4 标签选择器
    • 2.5 类选择器
    • • 2.5.1 多类名选择
    • 2.6 id选择器
    • 2.7 id选择器与类选择器的区别‘
    • 2.8 通配符选择器
    • 2.9 选择器对比

2.1 CSS选择器的作用

• 选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说，就是选择标签用的。

h1 { color : red; font-size : 25px;}

以上 CSS 做了两件事：

1. 找到所有的 h1 标签。 选择器（选对人）。
2. 设置这些标签的样式，比如颜色为红色（做对事）。

2.2 CSS选择器分类

• 基础选择器 ：是由单个选择器组成的
• 复合选择器 ：

2.3 CSS 基础选择器分类

• 标签选择器
• 类选择器
• id 选择器
• 通配符选择器

2.4 标签选择器

• 标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定 统一的 CSS 样式。

• 语法：

标签名{属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; ...
} 

• 说明：
  • 作用 标签选择器可以把某一类标签全部选择出来，比如所有的 标签和所有的 标签。
  • 优点 ：能快速为页面中同类型的标签统一设置样式。
  • 缺点 ：不能设计差异化样式，只能选择全部的当前标签

2.5 类选择器

• 如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器
• 语法(被选中的标签需要有class属性)

.类名 {属性1: 属性值1; ...
}

• 代码示例

这是一个div标签

2.5.1 多类名选择

1. 多类名使用方式

亚瑟

• 在标签class 属性中写 多个类名
• 多个类名中间必须用空格分开
• 这个标签就可以分别具有这些类名的样式

2. 多类名开发中使用场景

• 可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
• 这些标签都可以调用这个公共的类,然后再调用自己独有的类.
• 从而节省CSS代码,统一修改也非常方便

2.6 id选择器

• id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
• HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。

1. 语法：

#id名 {属性1: 属性值1; ...
} 

2. 示例

这是一个div标签

2.7 id选择器与类选择器的区别‘

① 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

② id 选择器好比人的身份证号码，全中国是唯一的，不得重复。

③ id 选择器和类选择器最大的不同在于使用次数上。

④ 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

2.8 通配符选择器

• CSS 中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。

1. 语法：

* {属性1: 属性值1; ...
}

• 通配符选择器不需要调用， 自动就给所有的元素使用样式

2. 代码示例：

* {margin: 0;//检索或设置对象四边的外延边距padding: 0;//检索或设置对象四边的内部边距
}

2.9 选择器对比