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. 九,ESP8266 判断是断电上电（强制硬件复位）之后运行的内部程序还是内部软件复位之后运行的程序(基于Lua脚本语言)

    现在我有一个需求,WIFI模块控制一个继电器,我要做的是如果内部程序跑乱了,造成了内部程序复位重启,那么控制继电器的状态不能改变 如果是设备断电了,然后又来电了,我需要的是继电器一定要是断开才好.不能 ...

  2. BZOJ3714 PA2014 Kuglarz 最小生成树

    题目传送门 题意:有$N$个盒子,每个盒子中有$0$或$1$个球.现在你可以花费$c_{i,j}$的代价获得$i$到$j$的盒子中球的总数的奇偶性,求最少需要多少代价才能知道哪些盒子中有球.$N \l ...

  3. odoo 订餐系统之消息提醒

    打算入手odoo开发新的系统,先研究下开发的过程是如何的.案例模仿自带的订餐系统,此系统模块不多,但很典型,可以达到联系的目的.先记录下订餐系统消息提醒的开发过程. 1.添加自己的addons目录my ...

  4. 解读tensorflow之rnn

    from: http://lan2720.github.io/2016/07/16/%E8%A7%A3%E8%AF%BBtensorflow%E4%B9%8Brnn/ 这两天想搞清楚用tensorfl ...

  5. item 5: 比起显式的类型声明，更偏爱auto

    本文翻译自modern effective C++,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 啊,简单愉快的代码: int x; 等等,讨厌!我忘了初始化x,所 ...

  6. linux下日志文件error监控报警脚本分享

    即对日志文件中的error进行监控,当日志文件中出现error关键字时,即可报警!(grep -i error 不区分大小写进行搜索"error"关键字,但是会将包含error大小 ...

  7. iOS实时查看App运行日志

    前言: 本文讨论如何实时查看输出在console控制台的日志. 一.Xcode 通过Window->Devices打开devices界面,选择我们的手机,也能看到手机中运行的进程输出的日志.如图 ...

  8. linux-shell-引用-命令替换-命令退出状态-逻辑操作符

    命令替换:bash7步扩展的之一 嵌套  这里没什么意义 退出状态可以参与逻辑判断 表达式 算数表达式和条件表达式,逻辑表达式 查看passwd命令比,避免用户捕获输入密码的接口 这种方式就可以直接输 ...

  9. 多校寒训TaoTao要吃鸡dp

    题目描述 Taotao的电脑带不动绝地求生,所以taotao只能去玩pc版的荒野行动了, 和绝地求生一样,游戏人物本身可以携带一定重量m的物品,装备背包 之后可以多携带h(h为0代表没有装备背包)重量 ...

  10. Note: SE Class's Individual Project

    虽然第一个Project还有点小问题需要修改,但是大体已经差不多了,先把blog记在这里,算是开博第一篇吧! 1.项目预计的用时 本来看到这个题的时候想的并不多,但是看了老师的要求才觉得如此麻烦ORZ ...