-
样式的冲突:当我们通过不同的选择器,选中相同的元素,并且为该元素的同一个样式设置不同的值时,此时就发生了样式的冲突。
发生冲突时,为发生冲突的样式设置哪个值由选择器的权重(优先级)决定。 -
样式的优先级:(由高到低)
样式 | 权值 |
---|---|
内联样式 | 1,0,0,0 |
id选择器 | 0,1,0,0 |
类和伪类选择器 | 0,0,1,0 |
元素选择器 | 0,0,0,1 |
通配选择器 | 0,0,0,0 |
继承的样式 | 没有优先级 |
注:1、比较优先级时,需将所有的选择器权值相加计算(相加是按位相加,不会进位),总的权值越高,优先级越高。但分组选择器是单独计算,不相加。
2、选择器的累加不会超过其最大数量级,比如:11个类选择器累加不会超过id选择器的值。其只在第二位累加,无法加到第三位。
3、如果优先级计算后相同,则使用后面设置的样式。
4、可以在样式的最后边加上 !important,此时该样式会获得最高优先级,甚至超过内联样式。(实际开发中慎用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 此时发生样式的冲突,div被设置为绿色 */
div{
color: red;
}
.red{
color: green;
}
/* 此时加了元素选择器后加了!important,其成为最高优先级 */
#box{
background-color: yellowgreen;
}
div{
background-color: blue !important;
}
/* 选择器权值累加,此时选择器的权值为0,1,0,1 */
div#box{
font-size: 50px;
}
</style>
</head>
<body>
<div id="box" class="red">
我是一个div
</div>
</body>
</html>