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

中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如 div)应用样式的时候，会有一些疑问，为什么我写在后面的样式不能覆盖前面的样式呢，不是说 CSS 是层叠样式表吗？ 如果你在开发中也遇到同样的问题，即在给某一元素应用样式的时候（比如写在外部样式表中），写在后面的样式不能覆盖前面定 义的样式。这个时候，你可能就得考虑是不是没考虑优先级问题了。 当我们在给一个标签，比如 div 应用样式的时候，我们得考虑优先级问题。 下面列出的就是是选择器的优先级： 行内样式 ID 选择器样式 类别选择器样式 标记选择器样式 标记选择器好比一个更广泛的概念，然后到类别选择器，到 ID 选择器，最后到行内样式，不断的精确下去，所以越精确，优先级越 高。比如下面的盒子模型： 我是标记选择器div 我是类别选择器.container 我是ID 选择器#article 我是行内样式style 下面我对上面这些优先级分别作一下证明： 比如页面中有一个 div 标签，它有相应的 id 和 class 属性，如下所示 div id=”article”itdriver.cn/div 现在我们先给它应用行内样式。 行内样式 : 也即直接应用在元素上的样式。 如 div style=”background-color:yellow”/div。 这个 style 属性其实就是 行内样式。 div id=”article” style=”background-color:yellow;”itdriver.cn/div 这时我们的 div 背景就变成了黄色了。 接着我们再通过 ID 选择器来设置 div 的样式。 ID 选择器：所谓 ID 选择器，就是我们在样式表中，通过一个#id 来给元素直接应用样式，大家请看下面的代码，就是如何给一个 指定 ID 的元素应用样式； /*给id 为article 的标签应用样式*/ #article{ background-color: grey; font-size: 0.8em; float:right; } 当我们运行示例的时候，会发现 div 的背景依然是黄色的，但是我们字体大小是按着#article 来设置的(因为行内样式没有设 置字体大小)。这就说明： 行内样式 ID 选择器应用的样式。 接着 ID 选择器的下面，我们应用 class 选择器样式 /*给id 为article 的标签应用样式*/ #article{ background-color: grey; font-size: 0.8em; float:right; } /*给所有指定container 为class 的标签应用样式*/ .container{ background-color:red; font-size: 0.5em; border:1px solid red; } 这是我们发现，除了给 div 加了个黄色边框，div 的背景色依然是行内样式设置的黄色，字体大小是#article 里设置的。由此我们可 以发现，虽然.container 写在#article 下面，但是却没有覆盖已经定义过的样式，这就证明了：行内样式 ID 选择器样式 类选 择器样式 最后再应用一个标记选择器样式 /*给id 为article 的标签应用样式*/ #article{ background-color: grey; font-size: 0.8em; float:right; } /*给所有指定container 为class 的标签应用样式*/ .container{ background-color:red; font-size: 0.5em; border:1px solid red; } div{ background-color:white; font-size:1em; border:2px solid black; color:green; } 我们会发现，只有字体的颜色发生了变化，其他的样式还是之前的样式，这就说明标记选择器没有覆盖前面类选择器，ID 选 择器以及行内已定义的样式。这也就证明了 ：行内样式 ID 选择器 类选择器 标记选择器.