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
|
|||
|
|
-->
|