优先级是根据由每种选择器类型构成的级联字串计算而成的. 它不是一个对应相应匹配表达式的权重值.如果优先级相同,元素最终会应用 CSS 中靠后的声明。
工具/原料
1
notepad
2
webstorm
方法/步骤
1
优先级顺序下列是一份优先级逐级增加的选择器列表:通用选择器*元素(类型)选择器类选择器属性选择器伪类ID 选择器内联样式事实上，元素还可以从父元素上继承一些样式，如color等属性。这些继承的样式的优先级永远低于元素本身的样式，包括通用选择器：
* { color:red;}#test{ color:blue; }最终text的颜色是红色的。!important 规则是例外当!important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪个位置. 尽管如此, !important规则还是与优先级毫无关系使用!important不是一个好习惯，因为它改变了你样式表本来的级联规则，从而难以调试。 一些不成文规则不要在全站范围的css中使用!important.只在需要覆盖全站范围的css或是外部css（例如引用的ExtJs或是YUI）的时候才在指定的页面上使用 !important。不要在你的插件中使用!important。永远都要优先考虑使用样式规则的优先级来解决问题而不是 !important。取而代之，你可以:更好的利用CSS的级联属性更多的使用适合的选择器。比如在你需要选定的对象元素前加上更多的元素，使选择的范围缩小，你的选择器就变得更有针对性，从而提高优先级：Text
div#test span { color: green }
span { color: red }
div span { color: blue }无论你css语句的顺序是什么样的，文本都会是绿色的(green)因为这一条规则是最有特殊性、优先级最高的。（同理，无论语句顺序怎样，蓝色(blue)的规则都会覆盖红色(red)的规则）
上一篇：幻灯片样式怎么弄