热门标签 | HotTags
当前位置:  开发笔记 > 后端 > 正文

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

我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗?如果你在开发中也遇到同样的问题,即在给某
我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说 CSS是层叠样式表吗?
如果你在开发中也遇到同样的问题,即在给某一元素应用样式的时候(比如写在外部样式表中),写在后面的样式不能覆盖前面定义的样式。这个时候,你可能就得考虑是不是没考虑优先级问题了。
 
当我们在给一个标签,比如div应用样式的时候,我们得考虑优先级问题。
下面列出的就是是选择器的优先级:
     行内样式 > ID选择器样式 > 类别选择器样式 > 标记选择器样式
 
标记选择器好比一个更广泛的概念,然后到类别选择器,到ID选择器,最后到行内样式,不断的精确下去,所以越精确,优先级越高。比如下面的盒子模型:
我是标记选择器 div
 
 
我是类别选择器 .container
 
我是ID选择器 #article
 
我是行内样式 style
 
下面我对上面这些优先级分别作一下证明:
比如页面中有一个div标签,它有相应的id和class属性,如下所示
 
itdriver.cn
 
现在我们先给它应用行内样式。
行内样式 : 也即直接应用在元素上的样式。 如
 style=”
。 这个style属性其实就是行内样式。
 
itdriver.cn
这时我们的div背景就变成了黄色了。
 
接着我们再通过ID选择器来设置div的样式。
ID选择器:所谓ID选择器,就是我们在样式表中,通过一个#id来给元素直接应用样式,大家请看下面的代码,就是如何给一个指定ID的元素应用样式;
/*给id为article的标签应用样式 */
#article{
     
     font-size: 0.8em;
     float:right;
}
 

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

接着ID选择器的下面,我们应用class选择器样式
/*给id为article的标签应用样式 */
#article{
     
     font-size: 0.8em;
     float:right;
}
 
/*给所有指定container为class的标签应用样式*/
.container{
     
     font-size: 0.5em;
     border:1px solid red;
}
这是我们发现,除了给div加了个黄色边框,div的背景色依然是行内样式设置的黄色,字体大小是#article里设置的。由此我们可以发现,虽然.container写在#article下面,但是却没有覆盖已经定义过的样式,这就证明了:行内样式 > 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;
}

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

 

转载自实战互联网:http://www.itdriver.cn/html/2014/08/03/9.html


推荐阅读
  • Iamtryingtoachievethearrowpointingupwards..iamtryingtoachieveitinmycssiamnotabl ... [详细]
  • 1、给边框加上圆角及阴影,如下代码:<!DOCTYPEhtmlPUBLIC"-W3CDTDHTML4.01TransitionalEN"" ... [详细]
  • http:js.alixixi.coma2014021292298.shtmlhttp:w3cshare.comexample?pid134http:w3cshare.comc ... [详细]
  • 这篇文章主要为大家展示了“html5+css3网站菜单的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习 ... [详细]
  • Ihaveafixed,100%heightmenuontheleftandIneedtocreateashadoweffectonitsrightside ... [详细]
  • 深入解析:Synchronized 关键字在 Java 中对 int 和 Integer 对象的作用与影响
    深入探讨了 `Synchronized` 关键字在 Java 中对 `int` 和 `Integer` 对象的影响。尽管初看此题似乎简单,但其实质在于理解对象的概念。根据《Java编程思想》第二章的观点,一切皆为对象。本文详细分析了 `Synchronized` 关键字在不同数据类型上的作用机制,特别是对基本数据类型 `int` 和包装类 `Integer` 的区别处理,帮助读者深入理解 Java 中的同步机制及其在多线程环境中的应用。 ... [详细]
  • 在Eclipse中提升开发效率,推荐使用Google V8插件以增强Node.js的调试体验。安装方法有两种:一是通过Eclipse Marketplace搜索并安装;二是通过“Help”菜单中的“Install New Software”,在名称栏输入“googleV8”。此插件能够显著改善调试过程中的性能和响应速度,提高开发者的生产力。 ... [详细]
  • background:-webkit-gradient(linear,10%10%,100%100%, ... [详细]
  • 前端实用的CSS3技巧有哪些
    本文小编为大家详细介绍“前端实用的CSS3技巧有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“前端实用的CSS3技巧有哪些”文章能帮助大家 ... [详细]
  • 怎么使用css3画三角形
    小编给大家分享一下怎么使用css3画三角形,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!首先看一下css3画三角形的原理我们先来看 ... [详细]
  • 你有什么见解
    本文主要介绍关于html5,css3的知识点,对【关于雾霾网站设计】和【你有什么见解】有兴趣的朋友可以看下由【-你在暮色中】投稿的技术文章,希望该技术和经验能帮到你解决你所遇的【】相关技术问题。你有 ... [详细]
  • 在DIV内垂直居中UL - Centering Vertically an UL inside a DIV
    iamtryingtomakeanavigationmenuinsidea200pxx200pxsquare,thisnavigationlist(UL)chang ... [详细]
  • 很有意思的全景动画:(直接上代码)html部分:<div><div>css部分:.panorama{width:300px;hei ... [详细]
  • 小编给大家分享一下CSS3如何实现loading预加载动画特效,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章 ... [详细]
  • 微信红包曾经引爆过一系列的营销热潮,相信大家对于这种红包形式并不陌生,这里本着娱乐至上的精神用React简单地实现了拆红包的动画效果,供大家一起交流学习项目源码地址:https:g ... [详细]
author-avatar
手机用户2602881147
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有