都知道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. activiti学习4:流程文件的部署

    activiti学习4:流程文件的部署 用bpmn规范定义好一个流程得到流程定义文件后,需要把该文件部署到activiti的数据库后,这个流程才可以使用. activiti中和流程定义相关的操作都需要 ...

  2. initramfs文件系统制作

    源码下载:https://busybox.net/downloads/ 源码版本:busybox-1.30.0.tar.bz2 [ 源码编译步骤 ] make menuconfig ARCH= COM ...

  3. sed取某域名对应的IP

  4. DatabaseGeneratedOption

    [DatabaseGenerated(DatabaseGeneratedOption.Identity)] 添加时  获取值   自增  默认值,,后期无法修改如:Id(AUTO_INCREMENT, ...

  5. 一秒可生成500万ID的分布式自增ID算法—雪花算法 (Snowflake，Delphi 版)

    概述 分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的. 有些时候我们希望能使用一种 ...

  6. 2019-7-17 正则表达式和re模块

    一.re模块与正则表达式之间的关系 正则表达式不是python独有的,它是一门独立的技术 所有的编程语言都可以使用正则 但是如果你想在python中使用,你就必须依赖于re模块 正则的官方定义:正则表 ...

  7. 【基本知识】UART接口

    1.简介 (1)UART一种通用异步串口数据总线,最低采用两路信号(TX/RX)即可实现全双工通信,十分简单: (2)UART采用LSB模式传输,串口数据传输格式如下图所示: 起始位:长度为1位的时间 ...

  8. c# 拼接字符串根据逗号切割 后转换成集合或数组

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_27559331/article/d ...

  9. ：阿里巴巴 Java 开发手册 （十一）工程结构

    (一) 应用分层 1. [推荐]图中默认上层依赖于下层,箭头关系表示可直接依赖,如:开放接口层可以依赖于 Web 层,也可以直接依赖于 Service 层,依此类推:  开放接口层:可直接封装 Se ...

  10. 用StatSVN统计svn项目中每人代码提交量

    用StatSVN统计SVN服务器项目的代码量 下载并安装SVN统计工具StatSVN 1)下载地址:sourceforge.net/projects/statsvn/ 2)解压压缩包,到一个目录,如D ...