MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » CSS中选择器优先级顺序实战讲授

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

www.MyException.Cn  网友分享于:2014-08-06  浏览:0次
CSS中选择器优先级顺序实战讲解
我们有些程序猿在给一个元素(比如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选择器 > 类选择器 > 标记选择器.

欢迎大家加入互联网技术交流群:62329335 

个人申明:所分享博文,绝对原创,并力争每一个知识点都通过实战演示来进行验证。

文章评论

我是如何打败拖延症的
我是如何打败拖延症的
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
 程序员的样子
程序员的样子
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
10个调试和排错的小建议
10个调试和排错的小建议
一个程序员的时间管理
一个程序员的时间管理
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
编程语言是女人
编程语言是女人
漫画:程序员的工作
漫画:程序员的工作
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
程序员应该关注的一些事儿
程序员应该关注的一些事儿
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
Java程序员必看电影
Java程序员必看电影
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
鲜为人知的编程真相
鲜为人知的编程真相
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
那些争议最大的编程观点
那些争议最大的编程观点
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
我的丈夫是个程序员
我的丈夫是个程序员
程序员必看的十大电影
程序员必看的十大电影
程序员和编码员之间的区别
程序员和编码员之间的区别
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
总结2014中国互联网十大段子
总结2014中国互联网十大段子
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
老程序员的下场
老程序员的下场
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
中美印日四国程序员比较
中美印日四国程序员比较
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
每天工作4小时的程序员
每天工作4小时的程序员
代码女神横空出世
代码女神横空出世
程序员都该阅读的书
程序员都该阅读的书
为什么程序员都是夜猫子
为什么程序员都是夜猫子
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
旅行,写作,编程
旅行,写作,编程
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有