音效素材网提供各类素材,打造精品素材网站!

站内导航 站长工具 投稿中心 手机访问

音效素材

详解CSS中的选择器优先级及样式层叠问题解决
日期:2021-09-08 12:18:28   来源:脚本之家

一. 新手的疑问
大家经常在网页中看到类似 li#first 这样的选择器。很多新手疑问了?由于使用 id 就已经可以确定元素了,为什么前面还要加一个 li? 直接写上 #first 这样的 id 选择器就可以了。听起来说得不错,简单测试一下也没有问题。
可是,我们经常看到带有元素名称的选择器,例如,在微软的项目模板中就有大量的带有元素名称的选择器,如果没有用的话,为什么要这样写呢?哈哈哈,这么写是有原因的,下面就带大家一起看一下!

CSS Code复制内容到剪贴板
  1. ul#navlist   
  2. {   
  3.     floatrightright;   
  4. }   
  5. ul#navlist li   
  6. {   
  7.     displayinline;   
  8. }  

二. 问题出现了
写一个简单的菜单,使用 ul 和 li 实现,菜单项之间使用边框来实现间隔线。
html 代码如下:

XML/HTML Code复制内容到剪贴板
  1. <ul id="navlist">  
  2.     <li class="first"><a href="/" id="current">Home</a></li>  
  3.     <li><a href="#">Store</a></li>  
  4.     <li><a href="#">ShoppingCart</a></li>  
  5.     <li><a href="#">Admin</a></li>  
  6. </ul>  

使用下面的样式表,首先通过为所有的超级链接增加一个左边框来画出间隔的虚线,然后将第一个菜单项的左边框去掉,我的第一个样式使用了 .first a。

CSS Code复制内容到剪贴板
  1. ul#navlist li   
  2. {   
  3.     displayinline;   
  4. }   
  5. ul#navlist li a   
  6. {   
  7.     border-left1px dotted #8A8575;   
  8.     padding10px;   
  9.     margin-top10px;   
  10.     color#8A8575;   
  11.     text-decorationnone;   
  12.     floatleft;   
  13. }   
  14. .first a   
  15. {   
  16.     bordernone;   
  17. }  

看一下效果,完全没有反应。
2016614112721896.png (361×73)

还有的地方说 id 选择器的级别比较高,那么将类改成 id 。

XML/HTML Code复制内容到剪贴板
  1. <li id="first"><a href="/" id="current">Home</a></li>  

将样式表也进行相应的修改。

CSS Code复制内容到剪贴板
  1. #first a   
  2. {   
  3.     bordernone;   
  4. }  

可是结果呢?岿然不动!
2016614112801641.png (361×73)

用火狐的 firebug 看一看,被忽略了。
2016614112924392.png (256×180)

三. 原因
为什么我的样式被秒杀了?
网上有大量的文章,但是说法并不一致,有的说要考虑三个级别,可是也有的说需要考虑四个级别,但是总的方向大致是关于层叠的。
不如到 W3C 的网站上看一个究竟。相关的标准在 这个页面 可以看到,目前为止的 CSS 标准有三个: CSS1, CSS2, 以及 CSS3。
CSS1 是最早的标准,其中关于层叠顺序的描述在 这里,还提供了一个简单的示例进行说明。

CSS Code复制内容到剪贴板
  1. LI            {...}  /* a=0 b=0 c=1 -> specificity =   1 */  
  2. UL LI         {...}  /* a=0 b=0 c=2 -> specificity =   2 */  
  3. UL OL LI      {...}  /* a=0 b=0 c=3 -> specificity =   3 */  
  4. LI.red        {...}  /* a=0 b=1 c=1 -> specificity =  11 */  
  5. UL OL LI.red  {...}  /* a=0 b=1 c=3 -> specificity =  13 */  
  6. #x34y         {...}  /* a=1 b=0 c=0 -> specificity = 100 */  

在 CSS1 中将优先级分为三组,将 id 选择器作为 a 组,类选择器作为 b 组,元素名作为 c 组,每组中出现一次,计数一次,按照先 a 组进行比较,相同的情况下,使用 b 组进行比较,最后是 c 组。什么选择器的优先级别高,什么选择器提供的样式有效。比如在上面的例子中,第 5 组使用 id 的级别最高,所以,这组的样式设置生效,而其他的设置将会被忽略掉。
CSS21 标准
在 CSS2 中,又增加了关于行内说明 style 的组,所以参与比较的组成为了 4 组,其中 style 的优先级别最高。同样,在 CSS2 的标准说明中也提供了样例。

CSS Code复制内容到剪贴板
  1. *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */  
  2.  li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */  
  3.  li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */  
  4.  ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */  
  5.  ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */  
  6.  h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */  
  7.  ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */  
  8.  li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */  
  9.  #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */  
  10.            /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */  
  11. <style type="text/css">   
  12.   #x97z { colorred }   
  13. </style>   
  14. <p id="x97z" style="color: green">   
  15. </p>  

在这个示例中,style 的优先级别最高,所以将会覆盖掉通过 id 进行的设置,颜色为绿色。

四. 解决问题
通过上面的分析可以看到,仅仅提供选择器并不足以能够生效,还要看选择器的优先级别,在我们的问题中,即使使用 id 来选择第一个菜单项:#first a ,包括了一个 id 和一个元素名,那么所得的优先级别为:
a=0, b=1, c=0, d=1
可是,通用的选择器是这样的:ul#navlist li a,优先级中却包括了一个 id, 还有 3 个元素名称,所以优先级别为:
a=0, b=1, c=0, d=3
所以我们的选择器没有比过通用的选择器,悲剧发生了!
知道了原因,问题也就简单了,提高我们选择器的优先级别,超过通用选择器的优先级就可以了,比如,我们可以写成这样:
ul#navlist li#first a
现在的优先级是多少呢?
a=0, b=2, c=0, d=3
在 b 组比较的时候就已经超过了,看看是否已经成功了!果然成功了,如下!
2016614113029700.png (328×56)

还可以加上重要性说明,也可以解决。!important 必须写在样式与分号之间,每个样式必须单独声明。这个也可以用来调整兼容性问题,IE6不识别!important;话说回来,兼容问题最好还是用hack方法解决比较好!

CSS Code复制内容到剪贴板
  1. #first a   
  2. {   
  3.     bordernone !important;   
  4. }  

五. 总结
通过上面的描述,不知道大家对于选择器的权重有了一定的了解没有。理解选择器的权重,可以更好的控制样式,用权重高的样式去覆盖掉那些权重低的样式!理解css的这一点,很重要!

    您感兴趣的教程

    在docker中安装mysql详解

    本篇文章主要介绍了在docker中安装mysql详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编...

    详解 安装 docker mysql

    win10中文输入法仅在桌面显示怎么办?

    win10中文输入法仅在桌面显示怎么办?

    win10系统使用搜狗,QQ输入法只有在显示桌面的时候才出来,在使用其他程序输入框里面却只能输入字母数字,win10中...

    win10 中文输入法

    一分钟掌握linux系统目录结构

    这篇文章主要介绍了linux系统目录结构,通过结构图和多张表格了解linux系统目录结构,感兴趣的小伙伴们可以参考一...

    结构 目录 系统 linux

    PHP程序员玩转Linux系列 Linux和Windows安装

    这篇文章主要为大家详细介绍了PHP程序员玩转Linux系列文章,Linux和Windows安装nginx教程,具有一定的参考价值,感兴趣...

    玩转 程序员 安装 系列 PHP

    win10怎么安装杜比音效Doby V4.1 win10安装杜

    第四代杜比®家庭影院®技术包含了一整套协同工作的技术,让PC 发出清晰的环绕声同时第四代杜比家庭影院技术...

    win10杜比音效

    纯CSS实现iOS风格打开关闭选择框功能

    这篇文章主要介绍了纯CSS实现iOS风格打开关闭选择框,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作...

    css ios c

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的办法

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的

    Win7给电脑C盘扩容的办法大家知道吗?当系统分区C盘空间不足时,就需要给它扩容了,如果不管,C盘没有足够的空间...

    Win7 C盘 扩容

    百度推广竞品词的投放策略

    SEM是基于关键词搜索的营销活动。作为推广人员,我们所做的工作,就是打理成千上万的关键词,关注它们的质量度...

    百度推广 竞品词

    Visual Studio Code(vscode) git的使用教程

    这篇文章主要介绍了详解Visual Studio Code(vscode) git的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。...

    教程 Studio Visual Code git

    七牛云储存创始人分享七牛的创立故事与

    这篇文章主要介绍了七牛云储存创始人分享七牛的创立故事与对Go语言的应用,七牛选用Go语言这门新兴的编程语言进行...

    七牛 Go语言

    Win10预览版Mobile 10547即将发布 9月19日上午

    微软副总裁Gabriel Aul的Twitter透露了 Win10 Mobile预览版10536即将发布,他表示该版本已进入内部慢速版阶段,发布时间目...

    Win10 预览版

    HTML标签meta总结,HTML5 head meta 属性整理

    移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析HTML代码,更好地将移动web前端页面表现出来...

    移动端html5模拟长按事件的实现方法

    这篇文章主要介绍了移动端html5模拟长按事件的实现方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家...

    移动端 html5 长按

    HTML常用meta大全(推荐)

    这篇文章主要介绍了HTML常用meta大全(推荐),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参...

    cdr怎么把图片转换成位图? cdr图片转换为位图的教程

    cdr怎么把图片转换成位图? cdr图片转换为

    cdr怎么把图片转换成位图?cdr中插入的图片想要转换成位图,该怎么转换呢?下面我们就来看看cdr图片转换为位图的...

    cdr 图片 位图

    win10系统怎么录屏?win10系统自带录屏详细教程

    win10系统怎么录屏?win10系统自带录屏详细

    当我们是使用win10系统的时候,想要录制电脑上的画面,这时候有人会想到下个第三方软件,其实可以用电脑上的自带...

    win10 系统自带录屏 详细教程

    + 更多教程 +
    教程标签
    HTMLCSSDreamweaverFrontpage