CSS如何覆盖公共样式中的某个属性？利用CSS样式的优先级。

如下例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

    .x{color: red;}

    .a .x{color:blue;}

    .a .b .x{color:green;}

</style>

</head>

<body>

<div class="x">你好</div>

<div class="a">

    <div class="x">你好</div>

</div>

<div class="b">

    <div class="x">你好</div>

</div>

<div class="a">

    <div class="b">

        <div class="x">你好</div>

    </div>

</div>

</body>

</html>

页面上字体颜色从上到下，依次是红、蓝、红、绿

有层级关系的样式，越精确的优先级越高。

　　利用这一个 特点，当公共样式中，当有需要特殊处理的样式，可以使用此种方法：
　　在当前样式前的父级，添加一个独一无二的样式名称。

　　另外，当父级中有多个样式的时候，如下：

<div class="a b">

    <div class="x">你好</div>

</div>

　　可以定义两个父级样式中的任何一个

<style type="text/css">

    .a .x{color:blue;}

    .b .x{color:green;

</style>

　　如果同时定义了两个父级样式，这个时候字体的颜色就与css中，这两个父级样式的顺序有关了，后加载的样式优先，此时后加载的是.b .x，所以字体颜色是绿色

CSS覆盖公共样式中的某个属性的更多相关文章

  1. 针对firefox ie6 ie7 ie8的css样式中的line-height属性

    针对firefox ie6 ie7 ie8的css样式中的line-height属性 以前我们大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7以上对! ...

  2. 这些Android系统样式中的颜色属性你知道吗？

    Android 系统样式中的颜色属性 推荐阅读看完后彻底搞清楚Android中的 Attr . Style .Theme 几个常用的颜色属性 先放上一张经典的图片,图片来自网络. 这张图在网上很是流传 ...

  3. reset.css css重置公共样式

    @charset "utf-8";/*Css Document*/ /*! * @名称:reset.css * @功能:1.重设浏览器默认样式 * 2.设置通用原子类 *//* 防 ...

  4. css覆盖select样式并添加小箭头

    .select { border-radius: 5px; border: 1px #F4A627 solid; -webkit-appearance: none;//清除默认样式 backgroun ...

  5. css常用公共样式

    /*style reset*/ body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,form,input,textarea,select{padding:0; margin:0;fon ...

  6. js--script和link中的 integrity 属性

    <link crossorigin="anonymous" integrity="sha256-+hDz/gVbhp24mhOmoIT4Du4F3K5fs9fjjo ...

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

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

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

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

  9. 修改css样式+jq中的效果+属性操作+元素操作

    :checked    选框选中的 一.修改css样式: 1.参数只写属性名,则返回属性值 $(this).css( ' color ');   //300px 2.参数是属性名,属性值,逗号分隔,是 ...

随机推荐

  1. MSComm控件与Win32 API操作串口有何区别？

    MSComm控件与Win32 API操作串口有何区别? [问题点数:50分,结帖人shell_shell]   收藏帖子 回复 我是一个小兵,在战场上拼命!   结帖率 83.33% 我以前用MSCo ...

  2. JVM调优——之CMS 常见参数解析

    最近在学习使用CMS这个GC,这里记录下常用的参数. 1. UseCMSCompactAtFullCollection 与 CMSFullGCsBeforeCompaction 有一点需要注意的是:C ...

  3. 浅谈MySQL引擎（纯个人理解，如有错误请指正）

    MySQL有很多引擎,MyISAM.InnoDB.MERGE.MEMORY(HEAP).BDB(BerkeleyDB).EXAMPLE.FEDERATED...等等 比较常用的就是InnoDB和MyI ...

  4. MySQL高可用方案MHA在线切换的步骤及原理

    在日常工作中,会碰到如下的场景,如mysql数据库升级,主服务器硬件升级等,这个时候就需要将写操作切换到另外一台服务器上,那么如何进行在线切换呢?同时,要求切换过程短,对业务的影响比较小. MHA就提 ...

  5. Spring+SpringMVC+MyBatis+easyUI整合进阶篇（八）线上Mysql数据库崩溃事故的原因和处理

    前文提要 承接前文<一次线上Mysql数据库崩溃事故的记录>,在文章中讲到了一次线上数据库崩溃的事件记录,建议两篇文章结合在一起看,不至于摸不着头脑. 由于时间原因,其中只讲了当时的一些经 ...

  6. YY：2018互联网创业公司应看清的事情

    潮流,技术,生活方式,盈利模式,消费人群几乎每年都在改变,2018,你看到的是怎样的一盘棋. 2018年是个很好的数字,很多互联网公司寄予希望在这个幸运数字年头奋起一搏,拿到一份可观的酬金.特别是一些 ...

  7. 分布式监控系统Zabbix--完整安装记录（7）-使用percona监控MySQL

    前面已经介绍了分布式监控系统Zabbix-3.0.3-完整安装记录(2)-添加mysql监控,但是没有提供可以直接使用的Key,太过简陋,监控效果不佳.要想更加仔细的监控Mysql,业内同学们都会选择 ...

  8. 701 C. They Are Everywhere

    链接 [http://codeforces.com/group/1EzrFFyOc0/contest/701/problem/C] 题意 给你一个包含大小写字母长度为n的字符串,让你找包含所有种类字符 ...

  9. linux内核设计第七周——可执行程序的装载

  10. nginx+tpmcat+redis实现session共享

    nginx+tpmcat+redis实现session共享 版本:nginx nginx-1.8.0.tar.gztomcat apache-tomcat-7.0.78.tar.gzredis  re ...