权值:标识当前选择器的重要程度。权值越大优先级越高。
- 元素选择器 1
- 类选择器 10
- ID选择器 100
- 内联样式 1000
选择器的权值 加到一起,大的优先,权值相同,以后定义为主`
优先级(由低到高):
在层叠性基础上,如果样式声明冲突(重复)的话,则按照默认的优先级去应用样式`
- 浏览器默认设置
- 样式表(内外部) 就近原则 - 后定义者优先
- 内联方式
- !important(最高)
CSS有哪些选择器:
-
通用选择器
*{ font-size:16px } -
元素选择器
h1{ color:red } -
类选择器
通过元素的class属性进行引用的选择器
特殊用法
div.text{}
定义class为text的div元素的样式 -
id选择器
语法:#ID值{ 样式声明} -
群组选择器
#container,div.text,.redColor,span{color:red;} -
后代选择器
通过元素的后代关系匹配元素
语法:选择器1 选择器2{} -
子代选择器
通过元素的子代(一层层级)关系匹配元素
语法:选择器1>选择器2{} -
伪类选择器
作用:匹配元素不同的状态的选择器
链接伪类
:link 匹配元素尚未被访问时候的状态
:visited 匹配元素访问过的状态
:hover 匹配鼠标悬停在元素上时的效果
:active 匹配元素被激活时的状态(超链接,文本框 和 密码框,点击的时候,就是 active)
:focus 匹配元素获取焦点时的状态(文本框 和 密码框)
注意:由于样式的叠加特性和用户的操作先后顺序影响,以上四个伪类选择器在书写时尽量按照
link vistied hover active的顺序来书写(lvha)