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

下载文档

ID：5994998

大小：463.66 KB

页数：3页

时间：2017-12-30

收藏

资源描述：

《css中选择器优先级顺序实战讲解》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、中选择器优先级顺序实战讲解我们有些程序猿在给一个元素(比如div)应用样式的时候，会有一些疑问，为什么我写在后面的样式不能覆盖前面的样式呢，不是说CSS是层叠样式表吗？如果你在开发中也遇到同样的问题，即在给某一元素应用样式的时候（比如写在外部样式表中），写在后面的样式不能覆盖前面定义的样式。这个时候，你可能就得考虑是不是没考虑优先级问题了。当我们在给一个标签，比如div应用样式的时候，我们得考虑优先级问题。下面列出的就是是选择器的优先级：行内样式>ID选择器样式>类别选择器样式>标记选择器样式标记选择器好比一个更广泛的概念，然后到类别选择器，

2、到ID选择器，最后到行内样式，不断的精确下去，所以越精确，优先级越高。比如下面的盒子模型：我是标记选择器div我是类别选择器.container我是ID选择器#article我是行内样式style下面我对上面这些优先级分别作一下证明：比如页面中有一个div标签，它有相应的id和class属性，如下所示itdriver.cn

现在我们先给它应用行内样式。行内样式:也即直接应用在元素上的样式。如

。这个style属性其实就

3、是行内样式。itdriver.cn

4、候，会发现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:1p

5、xsolidred;}这是我们发现，除了给div加了个黄色边框，div的背景色依然是行内样式设置的黄色，字体大小是#article里设置的。由此我们可以发现，虽然.container写在#article下面，但是却没有覆盖已经定义过的样式，这就证明了：行内样式>ID选择器样式>类选择器样式最后再应用一个标记选择器样式/*给id为article的标签应用样式*/#article{background-color:grey;font-size:0.8em;float:right;}/*给所有指定container为class的标签应用样式*/.c

6、ontainer{background-color:red;font-size:0.5em;border:1pxsolidred;}div{background-color:white;font-size:1em;border:2pxsolidblack;color:green;}我们会发现，只有字体的颜色发生了变化，其他的样式还是之前的样式，这就说明标记选择器没有覆盖前面类选择器，ID选择器以及行内已定义的样式。这也就证明了：行内样式>ID选择器>类选择器>标记选择器.