您现在的位置是：网站首页> 编程资料编程资料

详解CSS中的选择器优先级及样式层叠问题解决CSS优先级计算的规则css优先级计算方法(推荐)详解CSS中的选择器优先级顺序CSS z-index 层级关系优先级的概念CSS优先级的两种理解方式

2023-10-22 322人已围观

简介 CSS中的选择器是分权重的,如果不加注意则很有可能会遇到样式层叠的问题,下面我们就来详解CSS中的选择器优先级及样式层叠问题解决,需要的朋友可以参考下

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

CSS Code复制内容到剪贴板
  1. ul#navlist   
  2. {   
  3.     float: rightright;   
  4. }   
  5. ul#navlist li   
  6. {   
  7.     display: inline;   
  8. }  

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

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

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

CSS Code复制内容到剪贴板
  1. ul#navlist li   
  2. {   
  3.     display: inline;   
  4. }   
  5. ul#navlist li a   
  6. {   
  7.     border-left: 1px dotted #8A8575;   
  8.     padding: 10px;   
  9.     margin-top: 10px;   
  10.     color: #8A8575;   
  11.     text-decoration: none;   
  12.     float: left;   
  13. }   
  14. .first a   
  15. {   
  16.     border: none;   
  17. }  

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

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

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

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

CSS Code复制内容到剪贴板
  1. #first a   
  2. {   
  3.     border: none;   
  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.提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：不固定宽度和高度的情况下CSS调整div居中的方法总结CSS控制div宽度最大宽度/高度和最小宽度/高度的方法CSS设置HTML元素的高度与宽度的各种情况总结兼容IE6的网页最小最大宽度和最小最大高度css写法CSS的最大高度、最小高度及宽度在IE6下没有效果问题CSS控制页面最大最小宽度和高度可兼容IE6版本的实现方法CSS min-height IE6、IE7、FF下DIV自适应高度CSS IE6奇数宽度或高度的bugcss实现一个元素高度固定宽度按比例显示效果

    下一篇：CSS美化半个字符的巧妙方法纯CSS实现设置半个字符的样式CSS字符编码引起乱码的快速解决方法总结CSS中字符编码声明使用中的一些注意点CSS实现连续字符换行的方法用css控制字符串的输出长度超出时隐藏字符串过长CSS截取多余文字并用省略号显示用css截取字符实现文字自动截断隐藏溢出文本css实现字符串截断并加省略号示例css截取字符串简单实例table中的超长字符串用省略号表示的css样式

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网