选择器
一、作用:规范页面中哪些元素能够使用定义好的样式,匹配页面元素
二、详解
1、通用选择器
作用:匹配页面所有的元素
语法: *{}
2、元素选择器
作用: 匹配 页面中指定的元素的元素
语法:元素名{}
例:div{} p{} h1{} span{}
3、类选择器
作用:允许元素使用附带的class属性进行引用
语法:.类名{}
注意:不能以数字开始
i、多类选择器
作用:允许一个元素 引用 多个类选择器
语法:<标记class="类名1 类名2"></标记>
ii、分类选择器
作用:将类选择器和元素选择器结合使用,以便实现对某种元素中不同样式的细分控制
语法:元素选择器.类选择器{}
.redBack{}//匹配页面中所有class 为 redBack 的元素
div.redBack{}//匹配页面中所有class为redBack的div元素
4、id选择器
作用:只匹配页面指定id值得元素
语法:#idValue{}
5、群组选择器
声明时,以 逗号 隔开的选择器列表
语法:选择器1,选择器2,选择器3,..{ }
6、后代选择器
作用: 根据元素间的后代(出现在该元素中的所有元素)关系来匹配元素
语法:选择器1 选择器2{}
7、子代选择器
作用:根据元素间的子代(一层层级关系)关系来匹配元素
语法:选择器1>选择器2{}
8、伪类选择器
作用:匹配元素不同状态时的样式
分类
链接伪类、动态伪类、目标伪类、元素状态伪类、构伪类、否定伪类
语法: :伪类{}
选择器:伪类选择器{}
1、链接伪类
i、:link 适用于尚未访问的超链接
ii、visited 适用于访问过的超链接
2、动态伪类
i、:hover 适用于鼠标悬停在HTML元素时
ii、:active 适用于元素被激活时的状态
iii、:focus 适用于html元素获取焦点时的状态
三、优先级
选择器是通过权值表示优先级
元素选择器 1
类选择器 10
伪类选择器 10
ID选择器 100
内联样式 1000
选择器冲突时,将权值加到一起,大的优先。权值相同时,后定义优先