HTML 网页开发、CSS 基础语法—

选择器

基础选择器：标签选择器，id选择器，类选择器，通配符选择器

高级选择器：后代选择器，交集选择器，并集选择器

1. 标签选择器：

• 优点：可以选中所有的同名标签，设置所有同名标签的公共样式。

• 缺点：只能实现全选，不能对局部的标签添加特殊样式。

2. id选择器

① 通过标签上的 id 属性去选择标签。

② 书写方式：#id 属性值

③ 选择范围：只能选中一个标签。

④ id 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。每个 id 属性值必须是唯一的，不能与其他的 id 同名。

⑤ 注意：如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签取不同的 id 名，分别选中设置。

⑥ 缺点：id 选择器只能实现单选，不能帮我们完成多选的功能。

3.类选择器

必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。class 属性值可以与其他的class相同。

① 类选择器特点

• 特点 1：多个不同的标签，不区分标签类型，只要 class 属性值相同，都可以被同一个类选择器选中。

• 特点 2：一个标签的 class 属性可以有多个属性值，值之间用空格分隔，每个属性值组成的选择器，都可以选中这一个标签，每个选择器后面的样式都会添加给同一个标签。

② 类选择器的优点

a.通过一个类选择器进行多选，选中多个标签，添加公共样式。

b.一个标签可以被多个类选择器选中，可以将所有样式进行分离，分别提取公共样

式和单独样式，节省代码量。

注：实际工作中，通常我们有一个使用规律：类上样式(CSS)，id 上行为(JavaScript)。

4. 通配符标签（*）

① 优点：可以实现全选，简化书写。

② 缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使用通配符选择，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作。

③ 注意：实际上线的网站不允许使用 * 去清除默认内外边距。

④ 不过普通的案例，代码量较少时，为了节省书写，可以使用通配符。

5. 后代选择器

6. 交集选择器

• 通过一个标签之上满足所有的基础选择器的需求去选择标签。

• 书写方式：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头。

• 选择范围：选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能被选中。

• 比较常见的是标签与类的交集。

注：IE6 不支持类名连续交集写法。只注重最后一个选择器。

6. 并集选择器

用逗号隔开

理解层叠性和继承性

1.继承性

• 如果一个标签没有设置过一些样式，它的某个祖先级曾经设置过，在浏览器中该标签也加载了这些样式，这些样式都是从祖先级继承而来，这种现象就是继承性。

• 能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承。

2. 层叠性

① 层叠性简介

• 思考问题：同一个标签可以被多个选择器选中，如果选择器后面设置了相同的样式

属性，标签最终该加载哪个？或者，在继承性中，如果多个祖先都设置了相同的文

字样式，后代中该继承哪个祖先级的？

• 解决方法：就是使用层叠性去解决冲突。多个选择器在进行对比的过程中，最终只

有一个属性会成功加载，它会层叠、覆盖掉其他的属性。

• 判断最终胜出的属性是谁，需要依赖判断优先级。

② 判断方法

③ 选中目标标签

• 第一步：比较多个选择器的权重，权重高的层叠权重低的。

• 基础选择器的权重：根据选择范围，范围越大权重越小，* < 标签选择器 < 类选择器 < id选择器。

• 高级选择器权重比较方法：依次比较组成高级选择器的 id 的个数，类的个数，标签的个数，如果前面能够比较出大小就不再比较后面，如果前面相等就往后比较，直到比较出大小。

• 比较顺序：( id 个数, 类的个数, 标签的个数 )

• 第二步：如果选择器权重都相同，需要比较 CSS 中代码的书写顺序，后写的层叠先写

④ 选中目标标签的组先级

• 如果选择器选中的是祖先元素，文字的样式可以被继承。

• 第一步：比较就近原则，比较选择器选中的祖先级在 HTML 结构中距离目标标签的远近，近的层叠远的。

• 第二步：如果选中的祖先级距离目标一样近（同一个祖先级），比较选择器权重，权重大的层叠小的。

• 第三步：如果距离一样近，权重也相同，最后比较 CSS 中的书写顺序，后面的层叠前面的。

⑤ ！important

就近原则中，不需要比较选择器权重，所有important 会失效。

important 不能提升选器的权重，只能提升某条属性的权重到最大。

⑥

行内式权重

• 行内式样式与内嵌式或外链式样式比较权重时，行内式的权重最高。

• 但是，与 !important 关键字相比权重要低。

巴特西

HTML 网页开发、CSS 基础语法——十二.CSS选择器

最新文章

热门文章