<!--

权重问题整体说明：

1.权重的意义：判定CSS属性的优先级高低，也就是说判定那个CSS的属性优先显示，将其他的低优先级的CSS样式覆盖掉。

2.如何判断权重：数选择器的数量，按照Id选择器、类选择器、标签选择器进行展示（注意：不进位），结果大的优先级高，

    如：id选择器的个数为5，类选择器为8，标签选择器为6，则该样式的权重为586，如果另一个样式的权重为468，则第一个

    样式的权重大，优先展示第一个CSS样式

3.权重的原则

    （1）前提是选中标签,看权重,权重大的优先级要高,如果权重一样大,后面会覆盖掉前面的属性

    （2）继承来属性 它们的权重为0,跟选中的标签没有可比性

    （3）同是继承来的,谁描述的越近,谁的优先级要高."就近(选中标签)原则"

    （4）同是继承来的,谁描述的一样近,再回到数权重的状态

-->

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>权重问题</title>

    <style>

        /* 112 选择器的数量 id class 标签选择器 */

        #wrap div .box3 p{

           color: red;

        }

        /* 031 选择器的数量 id class 标签选择器 */

        .box .box2 .box3 p{

            color: green;

        }

        /* 201 选择器的数量 id class 标签选择器 */

        #wrap #wrap2 p{

            color: deeppink;

        }

        /* 201 > 112 > 031，所以字体显示显示为deeppink */

    </style>

</head>

<body>

    <div class="box" id="wrap">

        <div class="box2" id="wrap2">

            <div class="box3" id="wrap3">

                <p>马玉刚</p>

            </div>

        </div>

    </div>

</body>

</html>

13 CSS样式权重问题的更多相关文章

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

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

  2. CSS样式权重的级联cascade的概念

    我们知道,firefox在众多浏览器中是对css 2高度兼容的一款浏览器,那是我能够编写一个中型b2b网站的时候(并不能说是我遇到过的难题)在禅意花园中看到的一个案例,说的是某个菜单在css中定义了以 ...

  3. css样式权重优先级，css样式优先级

    原文:http://www.bkjia.com/Javascri... 样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性 ...

  4. 权重和层叠规则决定了CSS样式优先级

    一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | ...

  5. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  6. 从webkit内核简单看css样式和css规则优先级(权重)

    目录 webkit中样式相关类及类间关系 样式规则匹配 权重(优先级)计算 权重相同时的覆盖原则 webkit中样式相关类及类间关系 资料来源: <webkit技术内幕> 结构相关类: 1 ...

  7. CSS样式的引入&区别&权重&CSS层叠性&CSS样式的来源

    CSS样式的引入: 内部样式: 内部样式:写在当前页面style标签中的样式 内联样式:写在style属性中的样式 外部样式: link标签引入的CSS文件 @import引入的CSS文件,需要写在c ...

  8. CSS样式表继承详解

    最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...

  9. 从零开始学习html（七）CSS样式基本知识

    一.内联式css样式,直接写在现有的HTML标签中 <!DOCTYPE HTML> <html> <head> <meta http-equiv=" ...

随机推荐

  1. python去噪算法

    <programming computer vision with python >中denoise 算法有误,从网上好了可用的代码贴上,以便以后使用. 书中错误的代码: def deno ...

  2. QWidget之Alien与Native小记（果然是DirectUI的方式，QWidget居然提供了nativeParentWidget函数，而且可以动态设置native父窗口）good

    在QWidget 之paint部分杂记提到了从Qt4.4开始,Alien Widget被引入.那么...这是什么东西呢,我们在使用中又可能会感受到什么东西? 用例子来说话似乎比用源码来说话来得容易,所 ...

  3. Python 金融数据分析 （一）—— 股票数据

    1. tushare 库 tushare 的官网请见:TuShare -财经数据接口包,是国人自己开发的 Python 爬数据工具(所谓的爬,自然就是在线连网获取数据),囊括股票.期货.宏观经济.电影 ...

  4. 关于ExpandableListView的一个小例子

    喜欢显示好友QQ那样的列表,可以展开,可以收起,在android中,以往用的比较多的是listview,虽然可以实现列表的展示,但在某些情况下,我们还是希望用到可以分组并实现收缩的列表,那就要用到an ...

  5. Android 调用系统分享文字、图片、文件，可直达微信、朋友圈、QQ、QQ空间、微博

    原文:Android 调用系统分享文字.图片.文件,可直达微信.朋友圈.QQ.QQ空间.微博 兼容SDK 18以上的系统,直接调用系统分享功能,分享文本.图片.文件到第三方APP,如:微信.QQ.微博 ...

  6. 希尔伯特空间（Hilbert Space）

    欧氏空间 → 线性空间 + 内积 ⇒ 内积空间(元素的长度,元素的夹角和正交) 内积空间 + 完备性 ⇒ 希尔伯特空间 0. 欧几里得空间 欧氏空间是一个特别的度量空间,它使得我们能够对其的拓扑性质, ...

  7. C#操作EXCEL常见操作集合（行高,列宽,合并单元格,单元格边框线）

    private _Workbook _workBook = null; private Worksheet _workSheet = null; private Excel.Application _ ...

  8. 记一次删除Git记录中的大文件的过程

    app/test/target/ #查看大文件 git rev-list --objects --all | grep "$(git verify-pack -v .git/objects/ ...

  9. Hibernate入门配置案例

    Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全自动的orm框架,hibernate可以自动生成SQL语句,自 ...

  10. 【转载】MySQL和Keepalived高可用双主复制

    服务器主机IP和虚拟浮动IP配置 RealServer A 192.168.75.133 RealServer B 192.168.75.134 VIP A 192.168.75.110 VIP B ...