[css] 第29天 请描述css的权重计算规则

[haizhilin2013]

第29天 请描述css的权重计算规则

[yxkhaha]

• !important>id>class>标签>子代、相邻选择器>通配符选择器

[AnsonZnl]

权重值计算

选择器	案例	权重值
!important	!important	Infinity
内联样式	style=".."	1000
ID	#id	100
class	.class	10
属性	[type='text']	10
伪类	:hover	10
标签	p	1
伪元素	::first-line	1
相邻选择器、子代选择器、通配符	* > +	0

比较规则

• 1000>100。也就是说从左往右逐个等级比较，前一等级相等才往后比。
• 在权重相同的情况下，后面的样式会覆盖掉前面的样式。
• 继承属性没有权重值
• 通配符、子选择器、相邻选择器等的。虽然权值为0，但是也比继承的样式优先。
• ie6以上才支持important，并且尽量少用它。

参考：

• https://www.jb51.net/css/597210.html
• http://www.cnblogs.com/dq-Leung/p/4213375.html
• https://blog.csdn.net/qq_36130706/article/details/81415469
• https://blog.csdn.net/Street_Partners/article/details/83051546

网上查阅所得，如有不对，希望大家指出。

[tzjoke]

这道题去年推特上一个大神发的，几千个人只有一半人对。。。

两个123颜色是啥？

<div class="red blue">123</div>
<div class="blue red">123</div>

.red {
  color: red;
}

.blue {
  color: blue
}

[Vi-jay]

这道题去年推特上一个大神发的，几千个人只有一半人对。。。

两个123颜色是啥？

<div class="red blue">123</div>
<div class="blue red">123</div>

.red {
  color: red;
}

.blue {
  color: blue
}

都是蓝色
障眼法
css计算规则和class先后顺序无关

[jiamianmao]

权重值计算

选择器 案例 权重值
!important !important Infinity
内联样式 style=".." 1000
ID #id 100
class .class 10
属性 [type='text'] 10
伪类 :hover 10
标签 p 1
伪元素 ::first-line 1
相邻选择器、子代选择器、通配符 * > + 0

比较规则

• 1000>100。也就是说从左往右逐个等级比较，前一等级相等才往后比。
• 在权重相同的情况下，后面的样式会覆盖掉前面的样式。
• 继承属性没有权重值
• 通配符、子选择器、相邻选择器等的。虽然权值为0，但是也比继承的样式优先。
• ie6以上才支持important，并且尽量少用它。

参考：

• https://www.jb51.net/css/597210.html
• http://www.cnblogs.com/dq-Leung/p/4213375.html
• https://blog.csdn.net/qq_36130706/article/details/81415469
• https://blog.csdn.net/Street_Partners/article/details/83051546

网上查阅所得，如有不对，希望大家指出。

应该是不太对，我初学CSS的时候读过一本《精通CSS高级Web标准解决方案(第2版)》，里面说的是 id 的权重相当于 255 个 class

具体多少个我也没测试，但测试了一下11个 class 的权重依然是小于 id 的。

[Konata9]

一般的权重规则如下。

!important (正无穷) > 内联样式(1000) > #id(100) > .class(10) > tag(1) > *(0)

其中伪类和属性选择器([type='xxx']) 的权重与 class 相同；伪元素的权重与 tag 相同。

权重从左往右进行比较，只有前一级相等时才会向后比较。当权重相同时，靠后的样式会覆盖靠前的样式（这里的靠后是 CSS 文件中的顺序，不是 class 中的顺序）

.title {
  color: red;
}

.title {
  /* 真正生效的是这个 */
  color: green;
}

<h1 class="title">2333</h1>

这题与 Day23 说说 CSS 的优先级是如何计算的？ 是类似的。

[blueRoach]

!important(内联) > !importan(外联) > 内联 > ID(100) > Class(10) > tag(1) > *

[ferrinweb]

这道题去年推特上一个大神发的，几千个人只有一半人对。。。

两个123颜色是啥？

<div class="red blue">123</div>
<div class="blue red">123</div>

.red {
  color: red;
}

.blue {
  color: blue
}

即使都不会，统计学上也支持一半人答对。

[MrZ2019]

一般的权重规则如下。

!important (正无穷) > 内联样式(1000) > #id(100) > .class(10) > tag(1) > *(0)

其中伪类和属性选择器([type='xxx']) 的权重与 class 相同；伪元素的权重与 tag 相同。

权重从左往右进行比较，只有前一级相等时才会向后比较。当权重相同时，靠后的样式会覆盖靠前的样式（这里的靠后是 CSS 文件中的顺序，不是 class 中的顺序）

.title {
color: red;
}

.title {
/* 真正生效的是这个 */
color: green;
}

2333

这题与 Day23 说说 CSS 的优先级是如何计算的？ 是类似的。

[dealdot]

再来一个

.red.blue {
   color: purple;
}
.red {
 color: red;
}
.blue {
  color: blue;
}

<div class="red blue">123</div>
<div class="blue red">123</div>
<div class="blue">123</div>
<div class="red">123</div>

[zxcdsaqwe123]

标签选择器： 1
类选择器：10
ID选择器：100
！important：1000

[Iambecauseyouare]

权值的计算公式为：（第一等级选择器个数，第二选择器个数，第三选择器个数，第四选择器个数）