html权重的计算方法
时间: 2023-10-10 22:06:43 浏览: 80
HTML权重的计算方法是根据选择器的特殊性和重要性来确定的。特殊性是指选择器选中的范围越窄、越特殊,而重要性是指通过!important声明的样式具有最高的优先级。权重计算方法如下:
1. 首先计算选择器中的特殊性:
- 内联样式具有最高的特殊性,记为千位数为1,否则为0。
- 百位数等于选择器中id选择器(#id标记的选择器)的数量。
- 十位数等于选择器中类选择器(.class标记的选择器)、属性选择器和伪类选择器的数量。
- 个位数等于选择器中选择器和伪元素选择器的数量。
2. 然后比较选择器之间的重要性:
- 有!important声明的样式具有最高的重要性,优先级非常高,打破默认的优先规则。
- 作者样式表中的普通样式次之。
- 浏览器默认样式表的样式具有最低的重要性。
最终,将特殊性和重要性的值按顺序连接起来形成一个四位数,该数值即为选择器的权重。如果两个选择器的权重值相同,则采取“就近原则”。
例如,对于以下的HTML结构和CSS样式:
```html
<style>
a { /* 0001 */ color: red; }
div ul a { /* 0003 */ color: orange; }
#mydiv #mylist .mylink { /* 0210 */ color: chartreuse; }
#mydiv #mylist a:link { /* 0211 */ color: black; }
</style>
</head>
<body>
<div id="mydiv">
<ul id="mylist">
<li class="l" id="myLi">
<a href="#" class="mylink"> 权重的计算 </a>
</li>
</ul>
</div>
</body>
</html>
```
根据权重计算方法,可以得出以下结论:
- 第一个选择器`a`的权重为0001。
- 第二个选择器`div ul a`的权重为0003。
- 第三个选择器`#mydiv #mylist .mylink`的权重为0210。
- 第四个选择器`#mydiv #mylist a:link`的权重为0211。
因此,在这个例子中,最终应用的样式是`#mydiv #mylist a:link`选择器定义的样式,颜色为黑色。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* *3* [CSS选择器优先级以及权重计算方法](https://blog.csdn.net/quan44444/article/details/120287563)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item]
- *2* [html中权重的计算](https://blog.csdn.net/qq_45411328/article/details/107135239)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item]
[ .reference_list ]
阅读全文