-
在内嵌和外部的 CSS 中，要想将 CSS 样式应用于特定的 HTML 元素，首先需要找到该目标元素，这时就需要用到 CSS 中的选择器
-
选择器选择要添加样式的 HTML 标签的一种方法、模式
-
基础选择器：标签选择器、id 选择器、类选择器、通配符选择器
-
高级选择器：后代选择器、交集选择器、并集选择器
基础选择器
标签选择器
p {
width: 100px;
}
通过标签名去选择标签元素
-
书写方式：标签名
-
选择范围：选中的是 HTML 文件中所有的同名标签
-
注意：标签选择器可以选择所有的同名标签，会忽视 HTML 元素的嵌套关系，不管嵌套多深，都可以被选中
-
优点：可以选中所有的同名标签，设置所有同名标签的公共样式
-
缺点：只能实现全选，不能对局部的标签添加特殊样式
id 选择器
#text {
width: 100px;
}
- 通过标签上的 id 属性去选择标签
- 书写方式：#id
- 选择范围：只能选中一个标签
- id 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线、严格区分大小写，每个 id 属性值必须是唯一的，不能和其他的 id 同名
- 注意：如果希望多个标签设置相同的样式，使用 id 选择器的话，必须给这多个标签取不同的 id 名，分别选中单独设置
- 优点/缺点：id 选择器只能实现单选，不能完成多选
类选择器
.content {
width: 100px;
}
- 通过标签的 class 属性去选择标签
- 书写方式：.class
- 选择范围：是页面中所有 class 属性值相同的标签
- class 命名规则：必须字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写，class 属性值可以与其他的 class 相同
特点
- 多个不同的标签，不区分标签类型，只要 class 属性值相同，都可以被同一个类选择器选中
- 一个标签的 class 属性可以有多个属性值，值之间用空格分隔，每个属性值组成的选择器，都可以选中这一个标签，每个选择器后面的样式都会添加给同一个标签
特殊应用
原子类：在 CSS 中提前设置一些类名，每个类选择器后面只添加一条 CSS 样式属性，这些属性会在页面中经常被使用，后期可以不需要多次书写属性，只要将对应的类名添加给需要的标签即可
优点
- 通过一个类选择器进行多选，选中多个标签，添加公共样式
- 一个标签可以被多个类选择器选中，可以将所有样式进行分离，分别提取公共样式和单独样式，节省代码量
通配符选择器
* {
margin: 0;
padding: 0;
}
- 通过一个特殊符号选择页面内所有符号
- 书写方式：*
- 选择范围：包含 <html> 标签在内的所有标签
- 优点：可以实现全选，简化书写
- 缺点：该选择器效率低下，设置的部分公共样式并不是所有的标签都需要添加，如果使用通配符选择，会使得不需要的标签也加载一次样式，导致浏览器多做无用的工作
高级选择器
由于基础选择器不能实现所有的选择情况，后期在基础选择器的基础上衍生出了几种高级选择器，高级选择器的组成部分是基础选择器
后代选择器
div ul li .info {
font-size: 14px;
}
- 通过标签之间存在的嵌套关系（族谱关系）去选择元素，基本组成部分就是基础选择器
- 书写方式：空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中标签的祖辈级
- 选择范围：通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后一个选择器确定选中的标签
- 优点：减少 class 属性的定义使用，选择效率更高
交集选择器
p.info {
color: blue;
}
- 通过一个标签之上满足所有基础选择器的需求去选择标签
- 书写方式：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头
- 选择范围：选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能被选中
- 交集选择器可以进行类名的连续交集，需要满足更多的条件才能选中标签
- IE6 不支持类名连续交集写法
- 交集选择器可以作为其他高级选择器的组成部分
并集选择器
.text,.info {
color: red;
}
- 当不同的元素需要设置相同的样式，可以将目标元素的选择器进行并集书写
- 书写方式：多个选择器中用逗号进行分隔，最后一个后面不能加逗号
- 选择范围：是所有的单独选择器选中的标签的并集集合
用途
- 如果多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法
- 可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能
扫一扫
817
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
