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. CF487E Tourists 圆方树、树链剖分

    传送门 注意到我们需要求的是两点之间所有简单路径中最小值的最小值,那么对于一个点双联通分量来说,如果要经过它,则一定会经过这个点双联通分量里权值最小的点 注意:这里不能缩边双联通分量,样例\(2\)就 ...

  2. Luogu3191 HNOI2007 紧急疏散 二分答案、最大流

    传送门 题意:自己去看 考虑二分答案.$BFS$预处理出每一个人到每一扇门的最短时间,设二分的值为$mid$,那么把门拆成$mid$个点,每一个点代表第$1,2,...,mid$秒时的状态.$i-1$ ...

  3. 算法相关——Java排序算法之桶排序（一）

    (代码中对应一个数组的下标),将每个元素放入对应桶中,再将所有元素按顺序输出(代码中则按顺序将数组i下标输出arrary[i]次),即为{0,1,3,5,5,6,9}. 1.2  代码实现 /* *@ ...

  4. ASP.NET Core使用log4net记录日志

    .NET常用的日志组件有NLog.Log4net等,.NET CORE下微软也自带了日志组件,到目前为止还没用过,而我本人常用的是log4net,下面简单讲讲.NET CORE下怎么使用log4net ...

  5. HBase最佳实践-管好你的操作系统

    本文由  网易云发布. 作者:范欣欣 本篇文章仅限本站分享,如需转载,请联系网易获取授权. 操作系统这个话题其实很早就想拿出来和大家分享,拖到现在一方面是因为对其中各种理论理解并不十分透彻,怕讲不好: ...

  6. 案例学python——案例一：抓图

    最近项目不那么紧张,有时间来研究一下Python,先前断断续续的自学了一段时间,有些浅基础.刚好在码云上看到比较适合的案例,跟着案例再往前走一波. 案例一:爬虫抓图 开发工具:PyCharm    脚 ...

  7. Stencil 基础

    Stencil 一个轻量化,渐进式编译器,注意,不是框架. 使用 TypeScript 进行所有操作,这是一个门槛,有一定技术门槛要求. PS:个人强烈推荐所有的前端同学都学习,或至少了解这个超集语言 ...

  8. 如何手动写一个Python脚本自动爬取Bilibili小视频

    如何手动写一个Python脚本自动爬取Bilibili小视频 国庆结束之余,某个不务正业的码农不好好干活,在B站瞎逛着,毕竟国庆嘛,还让不让人休息了诶-- 我身边的很多小伙伴们在朋友圈里面晒着出去游玩 ...

  9. Hybrid APP基础篇(一)->什么是Hybrid App

    最新更新 一个开源的快速混合开发框架:https://github.com/quickhybrid/quickhybrid Android.iOS.JS三端内容初步都已经完成,有完善的设计思路.教程以 ...

  10. VS2013安装和单元测试

    1. VC2013安装过程及使用感受 刚上大一的时候老师推荐我们用VC++6.0.当时也就听了老师的话用VC++6.0编程了一段时间.后来上了大二买了电脑VC++6.0支持不了WIN8.1所以我就开始 ...