都知道CSS选择器有权重优先级，权重大的优先展示。

但部分人可能不清楚，权重值也是可以叠加计算的

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>element</title>

        <style>

            .classArea{

                width: 100px;

                height: 100px;

                background: red;

            }

            #idArea{

                background: yellow;

            }

            div#idArea{

                background: pink;

            }

        </style>

    </head>

    <body>

        <div class="classArea" id="idArea"></div>

    </body>

</html>

分析：

view{ // 权重为 1

  color: blue

}

.ele{ // 权重为 10

  color: red

}

#ele{ // 权重为 100

  color: pink

}

view#ele{ // 权重为 1 + 100 = 101，优先级最高，元素颜色为orange

  color: orange

}

view.ele{ // 权重为 1 + 10 = 11

  color: green

}

.

补充拓展：CSS权重值叠加的更多相关文章

  1. css 权重值(层叠性)详解

    目录 css权重值(重叠性)实例 权重值的计算 !important 提升权重值实例 什么情况下可以使用!important ? 总结: css权重值(重叠性)实例 css中有很多选择器,那在多个选择 ...

  2. 深入解析CSS样式层叠权重值

    本文为转载内容,源地址:http://www.ofcss.com/2011/05/26/css-cascade-specificity.html 读到<重新认识CSS的权重>这篇,在文章最 ...

  3. 常用css选择器以及选择器的权重值介绍

    一.选择器的权重值 选择器权重值比较: !important infinity   无穷大 行间样式                   1000 id                        ...

  4. css优先级及权重值

    优先级: 外部样式表 内部样式表(位于<head>标签内部 内联样式(在HTML元素内部)优先权最高 内联样式>内部样式=外部样式(看具体引入位置,解析的先后) 权重值: 第一等:内 ...

  5. CSS外边距叠加问题

    CSS外边距叠加就是margin-collapse,边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距,水平边 距永远不会重合.重叠结果计算规则:①.两个相邻的外边距都是正数时,折叠结果是它 ...

  6. 机器学习入门-文本特征-使用LDA主题模型构造标签 1.LatentDirichletAllocation(LDA用于构建主题模型) 2.LDA.components(输出各个词向量的权重值)

    函数说明 1.LDA(n_topics, max_iters, random_state)  用于构建LDA主题模型,将文本分成不同的主题 参数说明:n_topics 表示分为多少个主题, max_i ...

  7. HTML/CSS权值继承

    <style type="text/css">p{color:red;}.first{color:green;}/*因为权值高显示为绿色*/ span{color:pi ...

  8. CSS选择器优先级 CSS权值

    计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1  ID的权值为 0,1,0,0 important的权值为最高 ...

  9. 补充：CSS选择器样式的规范！

    css----页面样式,美化页面 css样式的三个规则 1内联式:直接写在html标签中 <p style="color:red"> 直接对html标签使用 style ...

随机推荐

  1. 深入玩转K8S之利用Label控制Pod位置

    首先介绍下什么是Label? Label是Kubernetes系列中一个核心概念.是一组绑定到K8s资源对象上的key/value对.同一个对象的labels属性的key必须唯一.label可以附加到 ...

  2. 机器学习之挖掘melb_data.csv数据

    mel_data.csv是关于melb地区房屋的数据 mel_data.csv import pandas as pd melbourne_file_path = "E:\data\Melb ...

  3. PHP防止sql语句注入终极解决方案(包含pdo各种操作使用实例)

    PHP防止sql语句注入终极解决方案完美解决方案就是使用拥有Prepared Statement机制(预处理sql)的PDO //先做个实验 先不用预处理sql写法<pre><?ph ...

  4. Anaconda3配置多版本python环境开发

    关注公众号:TJHIT

  5. latex 写大论文图目录中图注过长解决方案

    写论文(尤其是学位论文)的时候,Figure通常都是有很长的注释,而Latex的list of figures似乎不能换行(看到有换行的,不过感觉不够美观). 再说,list of figures里面 ...

  6. Python代码约定

    建议遵守以下约定: 使用 4 个空格来缩进 永远不要混用空格和制表符 在函数之间空一行 在类之间空两行 字典,列表,元组以及参数列表中,在 , 后添加一个空格.对于字典,: 后面也添加一个空格 在赋值 ...

  7. Java开发笔记（一百五十）C3P0连接池的用法

    JDBC既制定统一标准兼容了多种数据库,又利用预报告堵上了SQL注入漏洞,照理说已经很完善了,可是人算不如天算,它在性能方面不尽如人意.问题出在数据库连接的管理上,按照正常流程,每次操作完数据库,都要 ...

  8. PB 将菜单中的部分按钮设置为某些页面不可选中

    if tab_1.selectedtab = 9 or tab_1.selectedtab = 10 then uo_toolbarstrip.of_enable(uo_toolbarstrip.of ...

  9. 警告：MySQL-server-5.6.26-1.el7.x86_64.rpm: 头V3 DSA/SHA1 Signature, 密钥 ID 5072e1f5: NOKEY

    警告:MySQL-server--.el7.x86_64.rpm: 头V3 DSA/SHA1 Signature, 密钥 ID 5072e1f5: NOKEY 错误:依赖检测失败: /usr/bin/ ...

  10. (转).Net Core控制台生成exe能独立运行

    原文介绍了两种方式,方式一经测试可用(生成exe在开发机器上可运行),但是因为服务器是windows server2012 r2,没有安装补丁,造成了困难,尚未在服务器上运行成功. (提示 api-m ...