优先级顺序html,CSS中选择器优先级顺序实战讲解

CSS中选择器优先级顺序实战讲解

我们有些程序猿在给一个元素(比如div)应用样式的时候&＃xff0c;会有一些疑问&＃xff0c;为什么我写在后面的样式不能覆盖前面的样式呢&＃xff0c;不是说CSS是层叠样式表吗&＃xff1f;

如果你在开发中也遇到同样的问题&＃xff0c;即在给某一元素应用样式的时候(比如写在外部样式表中)&＃xff0c;写在后面的样式不能覆盖前面定义的样式。这个时候&＃xff0c;你可能就得考虑是不是没考虑优先级问题了。

当我们在给一个标签&＃xff0c;比如div应用样式的时候&＃xff0c;我们得考虑优先级问题。

下面列出的就是是选择器的优先级&＃xff1a;

行内样式 > ID选择器样式 > 类别选择器样式 > 标记选择器样式

标记选择器好比一个更广泛的概念&＃xff0c;然后到类别选择器&＃xff0c;到ID选择器&＃xff0c;最后到行内样式&＃xff0c;不断的精确下去&＃xff0c;所以越精确&＃xff0c;优先级越高。比如下面的盒子模型&＃xff1a;

我是标记选择器 div

我是类别选择器 .container

我是ID选择器 #article

我是行内样式 style

下面我对上面这些优先级分别作一下证明&＃xff1a;

比如页面中有一个div标签&＃xff0c;它有相应的id和class属性&＃xff0c;如下所示

现在我们先给它应用行内样式。

行内样式 :也即直接应用在元素上的样式。 如 。 这个style属性其实就是行内样式。

这时我们的div背景就变成了黄色了。

接着我们再通过ID选择器来设置div的样式。

ID选择器&＃xff1a;所谓ID选择器&＃xff0c;就是我们在样式表中&＃xff0c;通过一个#id来给元素直接应用样式&＃xff0c;大家请看下面的代码&＃xff0c;就是如何给一个指定ID的元素应用样式&＃xff1b;

/*给id为article的标签应用样式 */

#article{

font-size: 0.8em;

float:right;

}

当我们运行示例的时候&＃xff0c;会发现div的背景依然是黄色的&＃xff0c;但是我们字体大小是按着#article来设置的(因为行内样式没有设置字体大小)。这就说明&＃xff1a; 行内样式 > ID选择器应用的样式。

接着ID选择器的下面&＃xff0c;我们应用class选择器样式

/*给id为article的标签应用样式 */

#article{

font-size: 0.8em;

float:right;

}

/*给所有指定container为class的标签应用样式*/

.container{

font-size: 0.5em;

border:1px solid red;

}

这是我们发现&＃xff0c;除了给div加了个黄色边框&＃xff0c;div的背景色依然是行内样式设置的黄色&＃xff0c;字体大小是#article里设置的。由此我们可以发现&＃xff0c;虽然.container写在#article下面&＃xff0c;但是却没有覆盖已经定义过的样式&＃xff0c;这就证明了&＃xff1a;行内样式 > ID选择器样式 > 类选择器样式

最后再应用一个标记选择器样式

/*给id为article的标签应用样式 */

#article{

font-size: 0.8em;

float:right;

}

/*给所有指定container为class的标签应用样式*/

.container{

font-size: 0.5em;

border:1px solid red;

}

div{

font-size:1em;

border:2px solid black;

color:green;

}

我们会发现&＃xff0c;只有字体的颜色发生了变化&＃xff0c;其他的样式还是之前的样式&＃xff0c;这就说明标记选择器没有覆盖前面类选择器&＃xff0c;ID选择器以及行内已定义的样式。这也就证明了 &＃xff1a;行内样式 >ID选择器 > 类选择器 > 标记选择器.

原文&＃xff1a;http://www.cnblogs.com/lonelyxmas/p/3959253.html