<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三大特性-优先级</title>
<style>
/*
一、优先级:不同选择器选择同一个元素,并且设置相同的样式时,css会根据优先级选择使用样式。
选择器的权重:
!important 无敌
行内样式 1000
id选择器 0100
类、属性、伪类选择器 0010
标签选择器 0001
通配符、继承 0000
注意:
权重由四位数组成,权重高就优先执行。
权重从左到右依次比较,如高位相同,则比较下一位
权重可以叠加,但是不会进位
选择器分组单独计算
*/
/*#d1{
color: yellowgreen;
}
*/
/* 0001
0010
0011
*/
div[class*="div1"]{
color: orange!important;
}
/* 0010
0010
0020
*/
.div1.div2{
color: red;
}
</style>
</head>
<body>
<div id="d1" class="div1 div2">我是div</div>
</body>
</html>
版权属于:
yu
作品采用:
《
署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
》许可协议授权
评论 (0)