对于前端而言，了解css样式的优先级，对开发或处理bug有着事半功倍的效果，今天在做项目的时候，突然碰到一个优先级的小问题，刚开始不知道所因，后来才发现这个问题是由优先级造成的。先描述下问题，鼠标悬停在父容器时，子容器显示，移开消失。看到这个问题，可能有些人要喷了，这和优先级有毛线关系，看起来的确没关系，其实还是存在一定关系的。假如你在书写子容器样式时，采用的是内联式写法，那么这个悬停是否还有作用呢？看下面的代码……

示例代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>我是一个测试Demo</title>

    <style>

        .divTest{width: 200px;height: 100px;border: 3px solid red;font-size: 14px;text-align: center;margin: 10px 0}

        .divTest h2{display: none}

        .divTest:hover h2{display: block}

    </style>

</head>

<body>

    <div class="divTest">

        <h2>是不是想我！！！</h2>

    </div>

    <div class="divTest">

        <h2>是不是想我！！！</h2>

    </div>

    <div class="divTest">

        <h2 style="display: none">想我也没用！！！</h2>

    </div>

</body>

测试这个Demo时，会发现鼠标悬停在第三个div时，并没有任何效果。为什么会出现这种问题，是不是鼠标hover事件没有被触发，虽然认为这个是不可能的，但我还是测试了下，我将第三个内联样式去除，发现hover事件是可以被触发的，那是什么原因造成的呢？

分析原因

鼠标hover事件可以被触发，在内联中写入display: none却毫无作用，那么是什么原因造成的？是不是内联中写入display: none，会禁止hover事件？答案并非如此，内联的display: none，并没有禁止鼠标hover事件，而是因为内联样式的优先级要远远高于别的引入方式。

过程大概是这样：

如何在不修改内联样式条件下，可以让它正常出现

css中的一个属性：!important
描述：提升指定样式规则的应用优先权。

如果说内联样式是远程导弹威力惊人，那么!important就好比核武器毁天灭地。它的优先级可以说是css中权重最大，当然是在不考虑兼容性的情况下。

.divTest:hover h2{display: block !important;}

在不兼容!important属性的浏览器中，上面的Demo可以实现预想的效果，因为!important的优先级要高于内联样式优先级。

css优先级规则

  • 基础选择器
    css基础选择器有标签选择器、类选择器、id选择器、通用选择器
    p{color: red;font-size: 14px}/*标签选择器*/

    .test{color: red;font-size: 14px}/*类选择器*/

    #warp{color: red;font-size: 14px}/*id选择器*/

    *{color: red;font-size: 14px}/*通用选择器*/
  • 组合选择器
    div,h2,p{color: red;font-size: 14px}/*群组选择器*/    div a{color: red;font-size: 14px}/*后代选择器*/

    div>a{color: red;font-size: 14px}/*子选择器*/

    h2+p{color: red;font-size: 14px}/*同胞选择器*/
  • 属性选择器
    p[title]{color: red;font-size: 14px}

    p[class="test"]{color: red;font-size: 14px}

css优先级（借鉴前辈整理的笔记）

  1. id选择器默认优先级最高，其权值为100

  2. class选择器、属性选择器和伪类选择器的权值为10

  3. 标签选择器的优先级较低，其权值为1 所以在比较样式的优先级时，只需统计选择符中的id、class、标签名个数，然后把对应的权值相加即可。根据结果便可得出优先级高低。

  4. 如果样式值中含有!important，则该值优先级最高

h2{color:blue;}//其权值为1

#content{color:#666;}//其权值为100p

.test{color:#ccc;}//其权值为1+10=11

#main div .test{color:red;}//其权值为100+1+10=111div

#main .left #nav{color:#000}//其权值为1+100+10+100=211

总结

css优先级是前端必须掌握的基础知识，在开发或者修改页面bug时，不同场景都的css样式问题很有可能是由于css优先级所造成的，所以面对页面样式问题时，将css优先级考虑其中，或许能够得到意想不到的效果。

 
 

css 优先级的bug的更多相关文章

  1. CSS优先级总结(转载)

    样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External styl ...

  2. 关于css优先级

    css的优先级从低到高依次是:内部样式表的优先级为(1,0,0,0),id选择器优先级为(0,1,0,0),class选择器为(0.0,1,0),tag标签为(0.0,0,1).除此之外,!impor ...

  3. 前端面试题-CSS优先级

    一.选择器优先级 浏览器通过优先级来判断哪一些属性值与一个元素最为相关,从而在该元素上应用这些属性值.优先级是基于不同种类选择器组成的匹配规则. 二.优先级计算 优先级就是分配给指定的CSS声明的一个 ...

  4. css选择器及css优先级

    三个css选择器:id选择器#test1{ }.class选择器.test2{ }.标签选择器div{ }对三个div:<div>我是普通div</div>.<div i ...

  5. 关于CSS的优先级,CSS优先级计算

    原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权 ...

  6. css 优先级 机制

    多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet ...

  7. z-index、display、selector选择器优先级css优先级面试用到

    z-index:控制元素叠放顺序,哪个z-index数值越大,那个优先被叠放在上面. relative.absolute.fixed这三种情况可以使用z-index. static不可以使用. dis ...

  8. css优先级和层叠

    css优先级和层叠 1.优先级    计算方法:        a.行内样式        b.id选择器的数量        c.类,伪类和属性选择器的数量        d.标签选择器和伪元素选择 ...

  9. 使用background和background-image对CSS优先级造成影响

    在写一个关于背景图的CSS时候发现一个奇怪的现象, 原图: 如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

随机推荐

  1. iOS:Xcode7以上版本安装镜像文件.dmg

    Xcode:7.0~7.3的镜像如下,点击直接下载安装 xcode7.0:https://developer.apple.com/services-account/download?path=/Dev ...

  2. QT 异步函数转为同步函数的方法

    在QT中,一般推荐使用异步函数.除了异步函数的非阻塞特性外,QT的Signal/Slot特性在异步函数中可以得到充分的发挥.因此,在QT中,很多API的设计都是使用非阻塞的异步函数作为API,然后执行 ...

  3. Android -- Messenger与Service

    如果你需要你的service和其他进程通信,那么你可以使用一个Messenger来提供这个接口. 这种方法允许你在不使用 AIDL的情况下,进行跨进程通信IPC. 实现步骤 下面是一个如何使用 Mes ...

  4. 【分布式计算】关于Hadoop、Spark、Storm的讨论

    参考资料: 与 Hadoop 对比,如何看待 Spark 技术?:https://www.zhihu.com/question/26568496 还要不要做大数据:http://sinofool.cn ...

  5. 深入一点 让细节帮你和Fragment更熟络

    有一段时间没有写博客了.作为2017年的第一篇,初衷起始于前段时间一个接触安卓开发还不算太长时间的朋友聊到的一个问题: "假设,想要对一个Fragment每次在隐藏/显示之间做状态切换时进行 ...

  6. windows系统IIS环境下安装memcache的方法

    1.首先下载memcached-1.2.1-win32.zip 下载地址http://download.csdn.net/detail/u011986449/8110579 这下是windows下的版 ...

  7. 首先不谈C语言，我们先来谈谈编程工具

    系统环境: 推荐Windows xp sp1 软件: Tb2.0或3.0 推荐理由:最好的一个系统环境 系统环境: 推荐Windows xp/ Windows 7/ Windows 8.1/Windo ...

  8. JavaScript中字符串的match与replace方法

    1.match方法 match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配. match()方法的返回值为:存放匹配结果的数组. 2.replace方法 replace() 方 ...

  9. html单行注释符号

    html单行注释符号 2014-10-02 15:33 来源: IT技术学习网原创 阅读: 589   说到html的单行注释,比较特别,html中确确实实没有专门的单行注释符号.不管是//还是#,在 ...

  10. 【微信公众号】微信关于网页授权access_token和普通access_token的区别及两种不同方式授权

    微信官网网址:https://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html#.E9.99.84.EF.BC.9A.E6. ...