刚才写zenktodo的时候,通过动态添加class的方式修改一个div的样式,总是不起作用。

  1. #navigator {
  2. height: 100%;
  3. width: 200;
  4. position: absolute;
  5. left: 0;
  6. border: solid 2 #EEE;
  7. }
  8. .current_block {
  9. border: solid 2 #AE0;
  10. }

查找一些教材中(w3schools等),只说css的顺序是“元素上的style” > “文件头上的style元素” >“外部样式文件”,但对于样式文件中的多个相同样式的优先级怎样排列,没有详细说明。经过测试和继续搜索,得知优先级如下排列:

1. 样式表的元素选择器选择越精确,则其中的样式优先级越高:

id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式

所以上例中,#navigator的样式优先级大于.current_block的优先级,即使.current_block是最新添加的,也不起作用。

2. 对于相同类型选择器指定的样式,在样式表文件中,越靠后的优先级越高

注意,这里是样式表文件中越靠后的优先级越高,而不是在元素class出现的顺序。比如.class2 在样式表中出现在.class1之后:

  1. .class1 {
  2. color: black;
  3. }
  4. .class2 {
  5. color: red;
  6. }

而某个元素指定class时采用 class="class2 class1"这种方式指定,此时虽然class1在元素中指定时排在class2的后面,但因为在样式表文件中class1处于class2前面,此时仍然是class2的优先级更高,color的属性为red,而非black。

3. 如果要让某个样式的优先级变高,可以使用!important来指定:

  1. .class1 {
  2. color: black !important;
  3. }
  4. .class2 {
  5. color: red;
  6. }

此时class将使用black,而非red。

对于一开始遇到的问题,有两种解决方案:

1. 将border从#navigator中拿出来,放到一个class .block中,而.block放到.current_block之前:

  1. #navigator {
  2. height: 100%;
  3. width: 200;
  4. position: absolute;
  5. left: 0;
  6. }
  7. .block {
  8. border: solid 2 #EEE;
  9. }
  10. .current_block {
  11. border: solid 2 #AE0;
  12. }

需要默认为#navigator元素指定class="block"

2. 使用!important:

  1. #navigator {
  2. height: 100%;
  3. width: 200;
  4. position: absolute;
  5. left: 0;
  6. border: solid 2 #EEE;
  7. }
  8. .current_block {
  9. border: solid 2 #AE0 !important;
  10. }

此时无需作任何其他改动即可生效。可见第二种方案更简单一些。

css样式被覆盖解决方案的更多相关文章

  1. Vue 项目部署出现css样式失效的解决方案

    解决方案1: 你的问题就是css权重问题 如果相同权重可能存在引入顺序问题 简单粗暴解决办法 1: 如果是单页面 写入index.html里面 2:直接修改源码的css 很简单~~~3:加个!impo ...

  2. CSS样式表的写作规范

    推荐大家使用的CSS书写规范.顺序 写了这么久的CSS,但自己都没有按照良好的CSS书写规范来写CSS代码,东写一段西写一段,命名也是想到什么写什么,过一段时间自己都不知道写的是那一块内容, 这样会影 ...

  3. css样式加载顺序及覆盖顺序深入理解

    注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...

  4. CSS样式覆盖顺序

    有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下 Css代码   #navigator { height: 100%; width: 200; position:  ...

  5. css样式表中的样式覆盖顺序(转)

    有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下 Css代码   #navigator { height: 100%; width: 200; position:  ...

  6. CSS特异性(CSS Specificity)的细节之CSS样式权重的计算与理解(CSS样式覆盖规则)

    本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...

  7. 【转】CSS样式覆盖规则

    大家都知道CSS的全称叫做“层叠样式表”,但估计很多人都不知道“层叠”二字的含义.其实,“层叠”指的就是样式的覆盖,当一个元素被运用上多种样式,并且出现重名的样式属性时,浏览器必须从中选择一个属性值, ...

  8. CSS样式:覆盖规则

    规则一:由于继承而发生样式冲突时,最近祖先获胜. CSS的继承机制使得元素可以从包含它的祖先元素中继承样式,考虑下面这种情况: <html> <head> <title& ...

  9. 精通CSS高级Web标准解决方案(1-3 规划、组织与维护样式表)

    对文档应用样式 对代码进行注释/*......*/ 结构性注释 自我提示 删除注释.优化样式表 样式指南:解释代码与站点的视觉设计是如何组织在一起的 站点结构.文件结构.命名规则 编码标准:(X)ht ...

随机推荐

  1. iOS 9的新内容

    https://www.hackingwithswift.com/ios9 Search extensibility Update: I wrote a tutorial on Core Spotli ...

  2. 【解题报告】[动态规划] RQNOJ PID5 / 能量项链

    原题地址:http://www.rqnoj.cn/problem/5 解题思路: 今天刚刚才知道了区间DP..Orz..本来以为是状态压缩DP,后来看到数据量才发现原来不是.后来参考了别人的题解.自己 ...

  3. jsonp实现跨域访问

    要实现JSONP跨域访问,首先就要了解什么是跨域?然后JSONP与JSON的关系? 1.什么是跨域? 跨域简单的说就是一个域名下的程序和另一个域名下的程序做数据交互.比如说:现有一个http://ww ...

  4. s:iterator标签的使用

    1.在说明s:iterator标签的使用前,先了解下struts2中的Value Stack. 这里参考了webwork中对Value Stack的描述,由于struts2是在webwork的基础上进 ...

  5. Apache加载PHP.ini顺序

    网上找到一份关于Apache加载PHP.ini顺序的文档: (1) apache的httpd.conf中的PhpIniDir: (2) 注册表键值:HKEY_LOCAL_MACHINE->SOF ...

  6. [转] DateTime.Now.ToString()的较为全面的使用介绍

    原文地址 DateTime.Now.ToString() 用法 具体的操作如下面的两段代码 //2008年4月24日 System.DateTime.Now.ToString("D" ...

  7. 处理 JSON null 和空数组及对象

    描述了对 JSON 数据中使用的 null 和空数组及对象的处理. JSON 数据具有 null 和空数组及对象的概念.此部分说明其中每个概念如何映射到 null 和未设置的数据对象概念. Null ...

  8. Windows 环境搭建cocos2dx 3.x Eclipse的环境

    安装JDK,该步骤网上太多,不再赘述; 安装NDK,同样,直接去Google找到最新的NDK,下载解压到某个盘符根目录即可; 简便起见,使用ADT Bundle,而不要去使用Eclipse的原生包,可 ...

  9. JNI编程,C++调用Java

    本地代码中使用Java对象 通过使用合适的JNI函数,你可以创建Java对象,get.set 静态(static)和 实例(instance)的域,调用静态(static)和实例(instance)函 ...

  10. 对于cocos2d-x lua的防护措施

    自从cocos2d-x 用了 luajit之后,对于我们用lua开发的开发者来说,可是一个好消息,不单性能提升了不少,更重要的是在lua加密方面省了不少心,为什么,就是因为,luajit编译的字节码, ...