Apr 04, 2017

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 中有相同的选择器作用于一个元素，最后一个将会被优先使用。

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

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

无论 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;">

版权声明