如果多个样式规则适用于元素，则为优先顺序

Question

在HTML中，当多个样式规则应用于元素时，优先顺序是什么？

Rules that apply to an element identified by an id
Rules that apply to all elements of a particular class
Rules that apply to one or more specified tags

我认为是id＆gt; class＆gt;标签，我是对的吗？

Answer 1

  

我认为是id＆gt; class＆gt;标签，我是对的吗？

是的，你是。

这称为特异性;有关详细信息，请参阅this和this。

Answer 2

解释

有很多事情在发挥作用（像往常一样......），但重要的顺序是：

• 使用具有最高特异性的样式
• 如果更多具有相同的特性，则使用最新的

选择器的顺序[和/或css的使用，用于完整性]（以及它们添加到特异性值的是）：

• 标签
• 类
• ID
• 内联样式（通过style=""）
• !important
• tag + !important
• class + !important
• id + !important
• 内联样式+ !important

有些测试表明，一个元素/选择器上的256类具有比id更高的特异性。但在现实生活中，你大部分时间（如果你曾经做过CSS'对'）处理css文件中的类数+位置（你不应该使用#id来设置样式，因为它没有优于类和标签的优势主要用于通用样式）

在此处详细了解特异性：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

实施例

HTML：

<div id="johnny" class="walker whisky"> -- </div>

CSS：

/* example one */
div { border-color: red; } // border is red
.whisky { border-color: brown; } // now it's brown
#johnny { border-color: black; } // now it's black
div#johnny { border-color: red; } // it's red again
.walker { border-color: green !important; } // it's green

/* example two */ 
.whisky {border-color: brown; }
.whisky.walker {border-color: green; }
/* green */

/* example two */ 
.whisky.walker {border-color: brown; }
.whisky {border-color: green !important; }
/* green */

希望这有帮助。

Answer 3

为了解决样式格式规则，我建议使用例如：Chrome，因为它的Web Developer Plugin可以让您深入了解规则实际应用于特定节点的方式......