CSS 优先级

一个HTML元素可以被 多个CSS 命中,让我们用一个简单的段落举例:

<p class="message" id="introduction">
  This is a free HTML and CSS tutorial.
</p>

我们可以通过 标签名 修改这个段落:

p{ color: blue;}

或者我们可以使用 类名

.message{ color: green;}

或者我们可以使用 id

#introduction{ color: red;}

因为浏览器只能给一个段落赋予一种颜色,他的颜色决定于CSS中优先级最高的。这是 CSS 的优先级。

在我们的例子中,这个段落将会被渲染成红色,因为id选择器是最明确的,比其他选择器权重更高。

CSS 选择器的排序

如果 CSS 中有相同的选择器作用于一个元素,最后一个将会被优先使用。

p{ color: green;}
p{ color: red;}
/* Paragraphs will be red */

100分制

一个快速判断 CSS 权重的方式,通过度量选择器的明确性。

  • #id 100分
  • .class 10分
  • tag 1分

无论 CSS 出现的顺序怎样,“得分”最高的将会起作用。

#introduction{ color: red;}
.message{ color: green;}
p{ color: blue;}
<p class="message" id="introduction">
  MarkSheet is a free HTML and CSS tutorial.
</p>

MarkSheet is a free HTML and CSS tutorial.

#introduction{ color: red;} 是最明确的,因为 id 必须是整个页面唯一的,并且只会对应页面中的一个元素。

.message{ color: green;} 可以作用于任何属性有 class="message" 的HTML元素,因此没有id那么明确。同样的p{ color: blue;}可以作用于_任何_HTML段落。

如何避免冲突

在写CSS的时候,在几个地方使用相同的属性作用于一个元素的时候,很容易产生冲突。

避免做以下的事情:

  • 仅适用 类选择器:使用 .introduction 替代 #introduction,即使这个元素仅在页面中出现一次。
  • 避免给一个元素设置多个类名:不要写<p class="big red important">,可以使用 <p class="title">替代,使用更语义化的描述。
  • 不要使用行内样式<div style="background: blue;">