css权重

css权重

权重等级

在css中不同的选择器有不同的权重，样式的不同的编写的位置也有不同的权重

权重等级 示例 权重值
内联样式 style=“样式” 1000
ID #id 0100
属性选择器/.class/伪类选择器 :link / [target] 0010
元素名/伪元素选择器 ::after 0001

内联样式 > 外部样式

权重的规则

  1. 权重一样，编写在后面的样式会覆盖前面的样式；
  2. 权重不一样，权重值高的有效；
  3. 如果一条规则包含了更高权重的选择器，那么这个规则权重更高
  4. Id选择器的权重比属性选择器更高
  5. 类选择器比任意数量的元素选择器都高
  6. 通配符选择器跟继承来的样式，他们的权重以 0来计算

100个元素选择器也比不过一个class选择器

权重的计算

[计算方法来源于W3C][https://www.w3.org/TR/CSS2/cascade.html#value-stages]

选择器的特异性计算如下：

  • 如果声明的来源是'style'属性而不是带有选择器的规则，则计数为1，否则为0；否则（= a）（在HTML中，元素的“ style”属性的值是样式表规则。这些规则没有选择器，因此a = 1，b = 0，c = 0和d = 0。）
  • 计算ID选择器**的数量（= b）
  • 计算class、属性、伪类选择器**的数量（= c）
  • 计算元素和伪元素选择器的数量（= d）

当评估特异性时，您以a-b-c的形式创建一个数字，其中每个字母是三个特征之一的总和。

只有a值相等，浏览器才会比较b值。

只有当a和b的值相同时，浏览器才会考虑c值。

1-0-0的特异性得分比0-2-2更特异。

 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

下面的图片及描述来自[https://stuffandnonsense.co.uk/archives/css_specificity_wars.html#resources]

img img img img
元素选择器 特异性：0,0,1 类选择器 属性选择器 伪类 特殊性：0,1,0（10） id选择器 特异性：1,0,0 样式属性 特异性：1,0,0

每个角色（选择器）都有自己的西斯能力（特异性值），具体取决于它们在黑暗面方式中的强大程度：

  1. 突击部队（元素选择器）的能力不及达斯·摩尔（类选择器*）
  2. 达斯·莫尔（Darth Maul）比达斯·维达（Darth Vader）（ID选择器）强大
  3. 达斯·维达（Darth Vader）的威力比皇帝（style属性）强
  4. 死亡之星炸毁一切

*属性选择器和伪类具有与类选择器相同的功能。

！important 规则

用！important声明的样式会拥有最高的优先级

<style>
  h2 {
 	 color: red !important;
  }

  h2 {
 	 color: green;
  }
</style>

<h2>标题</h2>

继承

如果浏览器找不到一个可用样式中的值，它将使用继承。

继承意味着获取由父元素定义的属性的值。

只有与外观相关的是继承的，包括文本颜色，字体详细信息等。

与布局相关的不是继承。

--- W3C

inherit关键字

你可以通过使用inherit在样式中强制继承，

inherit 显式地告诉浏览器对属性使用父元素的值。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p  {
    color:white;
    background:grey;
    border: medium solid black;
}
span  {
    border: inherit;
}
</style>
</head>
<body>
    <a href="https://www.w3cschool.cn">website</a>
    <p>This is a <span>test</span> from www.w3cschool.cn.</p>
    <a href="https://www.w3.org">W3C</a>
</body>
</html>
posted @ 2020-04-02 17:48  故国神游  阅读(122)  评论(0)    收藏  举报