css权重是什么

c）、计算标签类型选择器和伪对象选择器的数量
一个标签类型选择器、伪对象选择器为一个c，一个c为1
d）、忽略通配符选择器
通配符选择器忽略不计
如下面这张图就是一个css选择器权重的例子：

如果两个选择符的权重相同，则可依照”就进原则”来判断，最后定义的选择符会被采用。但尽量避免出现这种依靠定义的顺序决定选择符优先级的情况，因为在后续的维护中很难保证定义的顺序不会被打乱。
优先级的基本规则
1.相同的权重：以后面出现的选择器为最后规则
假如在外部样式表中，同一个CSS规则你写了两次，那么出现在前面的选择器权重低，你的样式会选择后面的样式：
#content h1 {  padding: 5px;
}
#content h1 {  padding: 10px;
}
两个选择器的权重都是0，1，0，1，最后那个规则生效。
2.不同的权重，权重值高则生效
Id选择器的优先级比属性选择器高,比如下面的例子里样式表中#p123的权重明显比[id=p123]的权重要高。
a#a-02 { background-image : url(n.gif); }
a[id="a-02"] { background-image : url(n.png); }
3.就近原则
如我在样式表中对DOM定义的样式A,然后我又在html也对DOM定义了B,应用B
.A {  padding: 5px;
}
<style type="text/css">
  .B {    padding: 10px;
  }
</style>
4.无论多少个元素组成的选择器，都没有一个class选择器优先级高。
就是上面的那个例外。
5.无视DOM树的距离
如下样式：
body h1 {  color: green;
}
html h1 {  color: purple;
}
当它应用在下面的HTML时:
<html><body>
  <h1>Here is a title!</h1>
</body></html>
浏览器会将它渲染成purple;
实际上规则1也适用于此，不过由于其DOM负极标签的不同，故单拎出来特殊化。
6.:not 伪类例外
:not 否定伪类在优先级计算中不会被看作是伪类. 事实上, 在计算选择器数量时还是会把其中的选择器当做普通选择器进行计数.
div.outer p {
  color:orange;
}
div:not(.outer) p { 
 color: lime;
}
当它被应用在下面的HTML时,就是文字描述效果
<div class="outer">
  <p>orange</p>
  <div class="inner">
    <p>lime</p>
  </div>
</div>
7.!important 规则例外
当在一个样式声明上使用 !important 规则时，该样式声明会覆盖CSS中任何其他的声明。
尽管技术上 !important 与优先级毫无关系，但是它们之间直接相互影响。
使用 !important 是一个坏习惯，应该尽量避免，因为这打断了样式表中的固有的级联规则使得调试找bug变得更加困难了。
当两条相互冲突的带有!important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。
学习视频分享：css视频教程
以上就是css权重是什么的详细内容！

查看更多关于css权重是什么的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did66770

更新时间：2022-10-16 阅读：40次