有一下问题， 想让下面的border生效 ，#比. 优先级高，

    #navigator {

        height: 100%;

        width: 200;

        position: absolute;

        left: 0;

        border: solid 2 #EEE;

    }  

    .current_block {

        border: solid 2 #AE0;

    }

有2种方法

1.

#navigator {

    height: 100%;

    width: 200;

    position: absolute;

    left: 0;

}  

.block {

    border: solid 2 #EEE;

}  

.current_block {

    border: solid 2 #AE0;

}

2.

    #navigator {

        height: 100%;

        width: 200;

        position: absolute;

        left: 0;

        border: solid 2 #EEE;

    }  

    .current_block {

        border: solid 2 #AE0 !important;

    }

规则一：由于继承而发生样式冲突时，最近祖先获胜。

显示蓝色

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

<style>

body

 {color:black;}

p

 {color:blue;}

</style>

 </head>

 <body>

  <p>welcome

 to <strong>gaodayue的网络日志</strong></p>

 </body>

</html>

规则二：继承的样式和直接指定的样式冲突时，直接指定的样式获胜。

显示红色

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

<style>

body

 {color:black;}

p

 {color:blue;}

strong

 {color:red;}

</style>

 </head>

 <body>

  <p>welcome to
　　 <strong>gaodayue的网络日志</strong>
  </p>

 </body>

</html>

规则三：直接指定的样式发生冲突时，样式权值高者获胜。

CSS选择器 权值
标签选择器 1
类选择器 10
ID选择器 100
内联样式 1000
伪元素(:first-child等) 1
伪类(:link等) 10

可以看到，内联样式的权值>>ID选择器>>类选择器>>标签选择器，除此以外，后代选择器的权值为每项权值之和，比如”#nav .current a”的权值为100 + 10 + 1 = 111。

规则四：样式权值相同时，后者获胜。显示蓝色

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

    <style>

.byline

 a {color:red;}

p

 .email {color:blue;}

</style>

 </head>

 <body>

<p class="byline">Written by

	<a  class="email"  href="mailto:jean@cosmofarmer.com">Jean Graine de Pomme</a>

</p>

 </body>

</html>

规则五：!important的样式属性不被覆盖。

显示红色

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

<style>

.byline

 a {color:red !important;}

p

 .email {color:blue;}

</style>

 </head>

 <body>

<p class="byline">Written by

	<a class="email" href="mailto:jean@cosmofarmer.com">

		Jean Graine de Pomme

	</a>

</p>

 </body>

</html>

CSS样式覆盖规则的更多相关文章

  1. CSS特异性（CSS Specificity）的细节之CSS样式权重的计算与理解（CSS样式覆盖规则）

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

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

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

  3. CSS样式:覆盖规则

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

  4. css样式继承规则详解

    css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...

  5. CSS样式覆盖顺序

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

  6. div+css样式命名规则，值得收藏

    div+css样式命名规则,值得收藏 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:w ...

  7. CSS样式命名规则

    1.样式命名外 套: wrap主导航: mainnav子导航: subnav页 脚: footer整个页面: content页 眉: header页 脚: footer商 标: label标 题: t ...

  8. CSS中样式覆盖优先顺序

    原文地址:http://www.3lian.com/edu/2014/09-25/168393.html 层叠优先级是: 浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式 其 ...

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

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

随机推荐

  1. 2.3 DHC REST

    DHC REST也是Chrome浏览器的插件,可以在Chrome应用商店安装下载,主要用来模拟HTTP客户端发送测试数据到服务器.HTTP Get请求在开发中比较常用.

  2. JPA的介绍

    一.JPA概述 1.JPA是什么? JPA:Java Persistence API:用于对象持久化的 API,JPA是Java EE 5.0 平台标准的 ORM 规范, 使得应用程序以统一的方式访问 ...

  3. POJ 2062 HDU 1528 ZOJ 2223 Card Game Cheater

    水题,感觉和田忌赛马差不多 #include<cstdio> #include<cstring> #include<cmath> #include<algor ...

  4. 字符串匹配算法之KMP

    字符串匹配是计算机的基本任务之一. 举例来说,有一个字符串"BBC ABCDAB ABCDABCDABDE",我想知道,里面是否包含另一个字符串"ABCDABD" ...

  5. NGUI插件的一个扩展---NGUI_HUD_Text

    NGUI_HUD_Text扩展主要用于主角跟随和伤害/治疗的功能. 场景大概是这样的,我们希望有一个主角,在其头顶显示他的名字,在单击鼠标左键的时候显示红色的“-10”表示减少血量,单击鼠标右键的时候 ...

  6. JavaScript在智能手机上的应用-判断是否为移动浏览器

    -------------------- <script type="text/javascript">            var userAgent = navi ...

  7. delete、truncate与drop的区别

    转自:SQL truncate .delete与drop区别 相同点: 1.truncate和不带where子句的delete.以及drop都会删除表内的数据. 2.drop.truncate都是DD ...

  8. php编译错误Note that the MySQL client library is not bundled anymore!

    Note that the MySQL client library is not bundled anymore! 解决方法. 1. 查看系统有没有安装mysql header find / -na ...

  9. Canvas 数学、物理、动画学习笔记一

    Canvas 第五章 数学.物理和运动学习笔记让人映像深刻的运动,需要我们不只是简单的知道如何移动对象,还需要知道怎么按用户期望看到的方式去移动它们.这些需要基于数学知识的基本算法和物理学作用.基于点 ...

  10. Linux系统的时区和时间调整

     linux调整系统时区: 1)tzselect命令 找到相应的时区文件/usr/share/zoneinfo/Asia/Shanghai,用这个文件替换当前的/etc/localtime文件. 或者 ...