html - 如果多个样式规则应用于一个元素，则优先顺序

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>class> 标签，对吗？

Answer 1

说明

有很多事情在起作用(像往常一样……)，但对您来说重要的顺序是:

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

选择器的顺序 [和/或 css 的使用，为了完整性](以及它们添加到特异性值的是):

• 标签
• 类
• 编号
• 内联样式(通过 style="")
• !重要
• 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 */

希望这对您有所帮助。