摘要：优先级是由选择器组成的匹配规则决定的。这些继承的样式的优先级永远低于元素本身的样式，包括通用选择器最终的颜色是红色的。永远都要优先考虑使用样式规则的优先级来解决问题而不是。
概念
浏览器是通过判断优先级，来决定到底哪些属性值是与元素最相关的，从而应用到该元素上。优先级是由选择器组成的匹配规则决定的。
如何计算?优先级是根据由每种选择器类型构成的级联字串计算而成的. 它不是一个对应相应匹配表达式的权重值.
如果优先级相同,元素最终会应用 CSS 中靠后的声明.
注意: 在文档树中的距离是不会对元素优先级计算产生影响的.（可以看文档中无视DOM树中的距离的例子）
优先级顺序下列是一份优先级逐级增加的选择器列表:
通用选择器*
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式
事实上，元素还可以从父元素上继承一些样式，如color等属性。这些继承的样式的优先级永远低于元素本身的样式，包括通用选择器：
* {
color:red;
}
#test{
color:blue;
}
最终text的颜色是红色的。
!important 规则是例外当!important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪个位置. 尽管如此, !important规则还是与优先级毫无关系使用!important不是一个好习惯，因为它改变了你样式表本来的级联规则，从而难以调试。
一些不成文规则
不要在全站范围的css中使用!important.
只在需要覆盖全站范围的css或是外部css（例如引用的ExtJs或是YUI）的时候才在指定的页面上使用 !important。
不要在你的插件中使用!important。
永远都要优先考虑使用样式规则的优先级来解决问题而不是 !important。
取而代之，你可以:
更好的利用CSS的级联属性
更多的使用适合的选择器。比如在你需要选定的对象元素前加上更多的元素，使选择的范围缩小，你的选择器就变得更有针对性，从而提高优先级：
Textdiv#test span { color: green } span { color: red } div span { color: blue }
无论你css语句的顺序是什么样的，文本都会是绿色的(green)因为这一条规则是最有特殊性、优先级最高的。（同理，无论语句顺序怎样，蓝色(blue)的规则都会覆盖红色(red)的规则）
什么时候应该使用：A) 一种情况
你的网站上有一个设定了全站样式的CSS文件，同时你（或是你同事）写了一些效果通常都是很差的行内样式（行内样式的优先级是最高的）。
在这种情况下，你就可以在你全局的CSS文件中写一些!important的样式来覆盖掉那些直接写在元素上的行内样式。
活生生的例子比如：有人在jQuery插件里写了糟糕的行内样式。
B) 另一种情况
#someElement p {
color: blue;
}
p.awesome {
color: red;
}
在外层有 #someElement 的情况下，你怎样能使 awesome 的段落变成红色呢？这种情况下，如果不使用!important，第一条规则永远比第二条的优先级更高。
怎样覆盖掉 !important
很简单，你只需要再加一条 !important 的CSS语句，将其应用到更高优先级的选择器（在原有基础上添加额外的标签、class或id选择器）上；或是保持选择器一样，但添加的位置需要在原有声明的后面（优先级相同的情况下，后边定义的会覆盖前边定义的）。
想要把原有的绿色文本变成红色，提升优先级的方式:
#test.a{
color: red !important;
}
a{
color: green !important;
}
不过
a{
color: green !important;
}
a{
color: red !important;
}
更多关于important的帖子:
http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css
http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean
http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css
http://stackoverflow.com/questions/11178673/how-to-override-important
http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css
:not伪类例外
:not 否定伪类在优先级计算中不会被看作是伪类. 尽管如此, 在计算选择器数量时还是会把伪类当做普通选择器进行计数.
这是一块CSS代码:
div.outer p {
color:orange;
}
div:not(.outer) p {
color: lime;
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/110870.html
摘要：当你将一个样式添加到元素上却发现不起作用时，那就是遇到优先级问题了。那么应该如何处理优先级问题呢，下面我总结了一些解决优先级问题的常用法则。如内部样式外部样式内联样式此时显示的优先级是。 当你将一个样式添加到元素上却发现不起作用时，那就是遇到优先级问题了。那么应该如何处理 CSS 优先级问题呢，下面我总结了一些解决 CSS 优先级问题的常用法则。 样式距离 我们可以通过使用外部样式...
摘要：由于这种差异我们将对预处理器文件的配置封装为函数，由参数生成对应配置，将文件放入文件内，将配置放在文件内。 前言 源代码 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置，但是为了满足我们的项目需求还是要自己进行配置，不过我们可以使用一些 webpack 的预设值。同时 webpack 也拆成了两部分，webpack 和 w...
阅读 2710·2021-10-11 10:57
阅读 2378·2021-08-27 16:20
阅读 1359·2019-08-30 13:03
阅读 1547·2019-08-30 12:50
阅读 3302·2019-08-29 14:16
阅读 1517·2019-08-29 11:12
阅读 1593·2019-08-28 17:53
阅读 2874·2019-08-27 10:58
