Css选择器权重问题

我们都知道，在利用HTML+CSS开发网站的时候，CSS的选择器有很多种，例如：行间样式，ID选择器，class类选择器，标签选择器等等，但是当一个标签包含多种选择器时，有作用的究竟是哪个选择器呢？

例如以下代码：

<html>
<head>
<title>CSS权重</title>
<style>div{    width:100px;height:100px;background-color:red!important;
}
#div1{width:200px;height:200px;background-color:green;
}
.div2{width:300px;height:300px;background-color:yello;
}</style></head>
<body>
<div id="div1" class="div2" style="height:400px;width:400px;background-color:black;"></div>
</body></html>

如果这样的话代码中的DIV标签究竟应该展示成什么样？
答案就是400px乘400px的红色正方形，可能很多人还不清楚为什么会是这样，下面给大家列出所有选择器的权重：

选择器            权重
!important        Infinity
行间样式        1000
id                       100
class/属性/伪类 10
标签/伪元素        1
通配符                0

从这个CSS权重表可以看出important的权重最大，是Infinity，表示无穷大，而通配符选择器最小，是0，上面的例子中有important、标签、id、class、行间样式，所以根据这个CSS权重表就可以看出应该显示的是哪个css选择器的属性了。

Css选择器权重问题相关推荐

CSS选择器权重计算与优先级
CSS选择器权重计算与优先级选择器有优先级,可以通过权重来计算优先级. 一:优先级等级划分: 第一优先级:css属性+!important是一种强制改变优先级的方法,它会覆盖页面内任何位置定义的元 ...
CSS 选择器权重计算规则
CSS 选择器(Selector)的权重(Specificity)决定了对于同一元素,到底哪一条 CSS 规则会生效.且仅有当多条 CSS 规则都对同一元素声明了相应样式时,才会涉及到权重计算的问题. ...
html内容权重计算,HTML CSS 选择器权重计算规则
其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间我的行间CSS样式. 2.内联 h1{font-size: ...
css选择器权重排序_CSS选择器的权重与优先规则
我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们.那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢? 在CSS中,会 ...
css选择器权重与优先级
一:优先级第一优先级:css属性+!important 拥有最高优先级第二优先级: 给标签加style,及内联样式权值1000 第三优先级: id选择器,#id{} ...
【CSS笔记】CSS选择器的优先级（权重）
目录 1.1.选择器的优先级 1.2.CSS选择器权重 1.1.选择器的优先级 CSS选择器的优先级顺序如下所示: 内联样式(style) > id选择器 > class选择器 > ...
第二课：css选择器选择器优先级及css3新增选择器（系统解析）
一.复习html4.0时代的选择器 1.css选择器 id选择器 #header class选择器 .btn 标签选择器 p 复合选择器 div.container 所有后代选择器 ul li 多个选 ...
html5css选择器优先级,CSS选择器优先级[重要]
CSS选择器优先级浏览器是通过判断CSS优先级,来决定到底哪些属性值是与元素最为相关的,从而作用到该元素上.CSS选择器的合理组成规则决定了优先级,我们也常常用选择器优先级来合理控制元素达到我们理想 ...
学习总结：CSS(一)定义方式、选择器、选择器权重
一.CSS的定义方式 1.内部样式:<style></style> 2.行间样式:<div style="width:100px;height:100px;&q ...

Css选择器权重问题

Css选择器权重问题

Css选择器权重问题相关推荐

最新文章

热门文章