86 lines
1.8 KiB
HTML
86 lines
1.8 KiB
HTML
<!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>选择器权重</title>
|
||
|
||
<style>
|
||
|
||
#ip {
|
||
color: blue !important;
|
||
}
|
||
|
||
div .top p {
|
||
color: salmon !important;
|
||
}
|
||
|
||
p {
|
||
color: lightblue !important;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
</style>
|
||
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div id="app">
|
||
<div class="top">
|
||
<p class="top-p tp" id="ip"> <span>天地不仁</span> ,以万物为刍狗,圣人不仁,以百姓为刍狗。 </p>
|
||
</div>
|
||
<div class="bottom">
|
||
<p> <span>天地不仁</span> ,以万物为刍狗,圣人不仁,以百姓为刍狗。 </p>
|
||
</div>
|
||
<p> <span>天地不仁</span> ,以万物为刍狗,圣人不仁,以百姓为刍狗。 </p>
|
||
</div>
|
||
|
||
</body>
|
||
|
||
</html>
|
||
|
||
|
||
<!--之前已证：
|
||
继承的样式的权重 < 通配符选择器的权重 < 标签选择器的权重 < class 选择器的权重 < id选择器的权重 < !important
|
||
!important 给个最高权重
|
||
-->
|
||
|
||
<!-- 每种权重 都会有当前权重的值
|
||
|
||
继承的样式的权重 0
|
||
通配符选择器的权重 01
|
||
标签选择器的权重 001
|
||
class 选择器的权重 0001
|
||
id选择器的权重 00001
|
||
!important 0000000001
|
||
|
||
|
||
计算权重：
|
||
1.肯定不能进位
|
||
2.同选择器相加
|
||
3.倒着逐一判断大小
|
||
|
||
提一：
|
||
#ip
|
||
div .top p p p p p...n (n>10)
|
||
|
||
计算：
|
||
00001
|
||
00(n>10)10
|
||
|
||
题二: 权重等于
|
||
A. #app .top-P p
|
||
B. .top-p p #ip
|
||
|
||
题三：权重A>B
|
||
A: #app .top-p div p
|
||
B: .top-p p #ip
|
||
--> |