刚才写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. css样式表中的样式覆盖顺序(转)

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

  2. 一个DOM元素同时拥有多个类名时的样式产生冲突时 属性取决于css样式表中后读取到的属性

    如果一个DOM元素包含多个类名,其中的两个类名的属性产生冲突,并不是根据htnl中类名的顺序来决定DOM元素的属性, 而是根据css样式中的顺序来决定DOM元素的属性,它取决于css样式表中后读取到的 ...

  3. tp3.2替换模板中如果需要替换的图片在css样式表中怎么办?

    因为标签中的 style 定义的样式可直接覆盖 css样式表中定义的样式,所以可以在要替换的标签中用 style 直接定义样式,具体代码如下: <div class="aboutbg& ...

  4. CSS中的层叠、特殊性、继承、样式表中的@import

    CSS中的层叠.特殊性.继承.样式表中的@import 层叠 CSS有一个机制是层叠,层叠可以理解为对样式的覆盖,优先性为: 网站开发者的样式表 用户样式(通过设置浏览器的显示选项) 浏览器默认的样式 ...

  5. css样式表中四种属性选择器

    学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-we ...

  6. 自定义类StyleSheet跨浏览器操作样式表中的规则

    这是群里网友地瓜提供的一个类,不熟悉样式表对象和样式规则对象的浏览器差异的可以看看 /** * Stylesheet.js: utility methods for scripting CSS sty ...

  7. 从css样式表中抽取元素尺寸

    jS从样式表取值的函数.IE中以currentStyle,firefox中defaultView来获取 DOM.style仅仅能读到写在html中的样式值 获取样式值的函数 function retu ...

  8. 美丽的表格样式(使用CSS样式表控制表格样式)

    按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的 ...

  9. 漂亮的表格样式(使用CSS样式表控制表格样式)

    根据WEB2.0风格,设计了几个表格样式,我希望你喜欢. WEB2.0推广使用div开放式布局.但并不是完全放弃使用形式,在数据表现形式而言是一个不错的选择. 本节将介绍如何使用现在CSS样式表来控制 ...

随机推荐

  1. Project Euler 78:Coin partitions

    Coin partitions Let p(n) represent the number of different ways in which n coins can be separated in ...

  2. asp.net中几个网页跳转的方法及区别

    1:注意:Response.Redirect("a.html")是不能跳出框架.IFRAME的. 可以使用 Response.Write("<script Lang ...

  3. windows下顽固软件卸载不了的解决方法

    下面以autocad2012举例: cad2012卸载显示 “无法获得同类产品” 而且也安装不上. 解决方法:1,开始>运行>输入"regedit",找到下面的注册表路 ...

  4. SQL Server数据导入导出的几种方法

    在涉及到SQL Server编程或是管理时一定会用到数据的导入与导出, 导入导出的方法有多种,结合我在做项目时的经历做一下汇总: 1. SQL Server导入导出向导,这种方式是最方便的. 导入向导 ...

  5. linux下centos安装android sdk最新全面教程【可行】

    1.此教程解决了当你配置完android sdk的环境变量以后,可能在命令中打入adb还是提示错误.现在给大家提供最新解决方法,此方法同时可以解决最新的centos 6.5版本 2.本教程支持最新ja ...

  6. Android Handler传递参数动态更新UI界面demo

    package com.example.demo_test; import android.app.Activity; import android.os.Bundle; import android ...

  7. 神经网络指南Hacker's guide to Neural Networks

    Hi there, I'm a CS PhD student at Stanford. I've worked on Deep Learning for a few years as part of ...

  8. (1)WinForm和WebForm

    如上所述,WinForm程序通常分为四层,而WebForm程序通常分为三层.   举例说明,winForm程序: IEnumerable<BatchUpdateResult<string, ...

  9. Tornado 中的 get() 或 post() 方法

    ---恢复内容开始--- Tornado 中的 get() 或 post() 方法 请求处理程序和请求参数 Tornado 的 Web 程序会将 URL 或者 URL 范式映射到 tornado.we ...

  10. Apache端口配置

    找到配置文件 httpd.conf  并用编辑器打开. 在添加端口之前,我们可以查看端口是否已经被开启,命令如下: window查看端口: # 查看所有端口$ netstat -n -a# 查看 80 ...