选择器总结

作用:查找标签，设置样式。

1.基本选择器

1.1.标签选择器

标签选择器：使用标签名作为选择器 → 选中同名标签设置相同的样式。

例如：p, h1, div, a,......

注意：标签选择器无法差异化同名标签的显示效果。

1.2.类选择器

作用：查找标签，差异化设置标签的显示效果。

步骤：

1. 定义类选择器 → .类名
2. 使用类选择器 → 标签添加 class="类名“

注意：

类名自定义，不要用纯数字或中文，尽量用英文命名

一个类选择器可以供多个标签使用

一个标签可以使用多个类名，类名之间用空格隔开

开发习惯：类名 见名知意，多个单词可以用 - 连接，例如：news-hd

1.3.Id选择器

作用：查找标签，差异化设置标签的显示效果。

场景：id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式

步骤：

1. 定义 id 选择器 → #id名
2. 使用 id 选择器 → 标签添加 id= "id名”

规则：同一个 id 选择器在一个页面只能使用一次

1.4.通配符选择器

作用：查找页面所有标签，设置相同样式。

通配符选择器：  *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

经验：通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距

2.复合选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成。

作用：更准确、更高效的选择目标元素（标签）。

2.1.后代选择器

后代选择器：选中某元素的后代元素。(儿子,孙子...)

选择器写法：父选择器 子选择器 { CSS 属性}，父子选择器之间用空格隔开。

2.2.子代选择器

子代选择器：选中某元素的子代元素（最近的子级）。(儿子)

选择器写法：父选择器 > 子选择器 { CSS 属性}，父子选择器之间用 > 隔开。

2.3.交集选择器

交集选择器：选中同时满足多个条件的元素。

选择器写法：选择器1选择器2 { CSS 属性}，选择器之间连写，没有任何符号。

注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面。

2.4.并集选择器

并集选择器：选中多组标签设置相同的样式。

选择器写法：选择器1, 选择器2, …, 选择器N { CSS 属性}，选择器之间用 , (逗号)隔开。

2.5.伪类选择器

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。

eg.鼠标悬停状态：选择器:hover { CSS 属性 }

伪类-超链接（拓展）

超链接一共有四个状态

提示：如果要给超链接设置以上四个状态，需要按 LVHA 的顺序书写。

2.6.结构伪类选择器

作用：根据元素的结构关系查找元素

2.7.伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。

注意点：

1.必须设置 content: ””属性，用来 设置伪元素的内容，如果没有内容，则引号留空即可

2.伪元素默认是行内显示模式

3.权重和标签选择器相同

选择器的权重

同一元素的同一属性权重：

行内样式 > id 选择器 > （class 、属性、伪类选择器 ）> （标签、伪元素选择器 ）> 通配选择器

注意，优先级比较的是相同元素的相同属性