介绍
本文是在学习CSS时做的学习笔记,所有笔记内容为 CSS学习笔记
样式选择器权值
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meta</title>
</head>
<style>
#box1{
color:green
}
div{
color:red
}
.red{
color:red
}
样式冲突,
-通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值
此时就发生了样式的冲突
发生样式冲突时,应用那个样式由选择器的权重(优先级)决定
选择器的权重
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配符选择器 0,0,0,0
继承的样式 没有优先级
比较优先级时,需要将所有选择器的优先级进行相加计算,最后优先级越高,则
越优先显示。
注意,分组选择器是单独计算的
选择器的累加,不会超过其最大的数量级,比如,类选择器累加再高也不会超过id选择器
一般,选择器越具体,优先级越高
如果,选择器优先级相同,则优先使用靠下的样式,即后声名的选择器覆盖前边的选择器
!important 表示赋予最高优先级,超过内联样式。
注意,在开发中,一定要慎用
</style>
<body>
<div id="box1" class="red" >我是一个div</div>
</body>
</html>