都知道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. 【NPDP笔记】第三章 新产品流程

      3.1 产品开发,风险与汇报的过程,开发实践和流程提升成功率 管控新产品失败的风险,随着成本增加,风险降低 知识能改改进决策,降低风险,决策框架 识别问题与机会 收集信息 组织记录,组织员工 外部 ...

  2. 191128A学习入门-典型信号，单位冲激信号

    之所以研究典型信号是因为这些信号可以组合成复杂的信号.而根据线性时不变系统的性质,先把复杂信号拆解成多个简单信号的组合,那么每个简单信号通过这个系统后的输出累加等于原来的输出. 单位冲激信号,单位阶跃 ...

  3. [Py] 简单的 Python 运行环境

    python:https://www.python.org/downloads/ pip:https://pip.pypa.io/en/stable/installing/#upgrading-pip ...

  4. Python删除文件，空文件夹，非空文件夹

    首先,在Python中文件路径是这种格式: file_path1 = r'F:\test\1' 删除文件,命令 os.remove(file_path1) 删除空文件夹,命令 os.rmdir(fil ...

  5. 1.3 LVM条带化

    1.什么是条带化 磁盘冲突:当多个进程同时访问一个磁盘时,可能会出现磁盘冲突.磁盘系统对访问次数(每秒的IOPS)和数据传输速率(读写速率,TPS)有限制.当达到这些限制时,后面需要访问磁盘的进程就需 ...

  6. 【笔试题】Java Data Types

    Java 知识测试 Java Data Types Question 1 Predict the output of the following program. class Test { publi ...

  7. 池化方法总结（Pooling）

       https://blog.csdn.net/mao_kun/article/details/50507376 在卷积神经网络中,我们经常会碰到池化操作,而池化层往往在卷积层后面,通过池化来降低卷 ...

  8. 「UR#5」怎样更有力气

    「UR#5」怎样更有力气 解题思路 考虑没有限制的情况,一定是把操作离线下来,按照边权从小到达做.可以发现,如果没有限制,完全图是多余的,直接拿树边进行合并就可以了.我们要做这么一件事情,把每个点属于 ...

  9. 【强烈推荐】ok-admin 一个好看又好用的后台模版！！！

    ok-admin 一个很赞的,扁平化风格的,响应式布局的后台管理模版,旨为后端程序员减压! 目前一共有两个版本:ok-admin v1.0和ok-admin v2.0可自由选择! 源码地址:https ...

  10. JVM粗解

    主要是碰到了eclipse无法启动的问题.之前不知道怎么回事导致eclipse启动速度一次比一次慢, 百度了下开始改动eclipse.ini参数 也不知道改了啥.第二天直接起不来eclipse了. 于 ...