1

在 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>tags，对吗？

4

3 回答 3

3

解释

有很多事情在起作用（像往常一样……），但对你来说重要的顺序是：

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

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

  • 标签
  • 班级
  • ID
  • 内联样式（通过style=""）
  • !important
  • 标签 +!important
  • 班级 +!important
  • 身份证+!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 */

希望这可以帮助。

于 2012-11-14T10:53:41.353 回答
3

我认为是 id>class>tags，对吗？

是的，你是。

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

于 2012-11-14T09:55:23.137 回答
0

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

于 2012-11-14T09:57:03.180 回答