当我们的网页上有多个选择器冲突时,就需要比较他们的权重来决定使用哪个
| 权重 | |
|---|---|
| 继承或* | 0,0,0,0 |
| 每个元素(标签) | 0,0,0,1 |
| 每个类或伪类 | 0,0,1,0 |
| 每个id | 0,1,0,0 |
| 每个行内样式 | 1,0,0,0 |
| 每个!important | 无穷大 |
当权重一样时采用就近原则
一
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>例题一</title>
<style type="text/css">
#father #son{/*0,2,0,0*/
color:green;
}
#father p.c2{/*0,1,1,1*/
color:bule;
}
div.c1 p.c2{/*0,0,2,2*/
color:red;
}
#father{/*0,1,0,0*/
color:yellow;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
样式
</p>
</div>
</body>
</html>
二
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>例题三</title>
<style type="text/css">
p{ /*0,0,0,1*/
color:red;
}
#father{/*0,1,0,0*/
color:yellow;
}
</style>
</head>
<body>
<div id="father">
<p>样式</p>
</div>
<!--继承比重为0,所以虽然继承了div的黄色(0,0,0,0),但在与本身标签选择器冲突时,元素标签的权重更高,所以为红色(0,0,0,1)-->
</body>
</html>
三
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>例题三</title>
<style type="text/css">
div div div div{
color:red;
}
#father{
color:blue;
}
</style>
</head>
<body>
<div><div><div><div>
<div id="father" >
样式1
</div>
</div></div></div></div>
<div>
<div id="father" >
样式
</div>
</div>
</body>
</html>
四
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>例题一</title>
<style type="text/css">
div div div div{/*0,2,0,0*/
color:red;
}
div{/*0,1,1,1*/
color:blue;
}
</style>
</head>
<body>
<div><div><div><div>
<div>
样式1
</div>
</div></div></div></div>
<div>
<div id="father" >
样式
</div>
</div>
</body>
</html>
五
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>例题五</title>
<style type="text/css">
.c1 .c2 div{
color:yellow;
}
#b1 div{
color:blue;
}
div #b2{
color:red;
}
<!--两者权重一致,就近原则-->
</style>
</head>
<body>
<div id="b1" class="c1">
<div id="b2" class="c2">
样式1
</div>
</div>
</body>
</html>
六
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
</body>
</html>
扫一扫
4729
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
