都知道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. Difference between LinkedList vs ArrayList in Java

    source-url LinkedList implements it with a doubly-linked list. ArrayList implements it with a dynami ...

  2. Java 8并行流的性能陷阱

    并行化流被分成多个块,每个块独立处理,结果在最后汇总. CPU密集型代码如下: private long countPrimes(int max) {     return range(1, max) ...

  3. 【bat】实现数组，for循环取数据

    1.数组对象 @echo off set objLength=2 set obj[0].name=test1 set obj[0].password=1234 set obj[1].name=test ...

  4. Tomcat 的端口被占用的解决办法

    在dos下,输入  netstat   -ano|findstr  8080 //说明:查看占用8080端口的进程 显示占用端口的进程 taskkill  /pid  6856  /f //说明,运行 ...

  5. 常见GC算法，CMS以及G1的垃圾回收过程，CMS的各个阶段哪两个是Stop the world的，CMS会不会产生碎片，G1的优势。

    常见GC算法 在C/C++中是由程序员自己去申请.管理和释放内存的,因此没有GC的概念.而在Java中,专门有一个用于垃圾回收的后台线程来进行监控.扫描,自动将一些无用的内存进行释放.下面介绍几种常见 ...

  6. Java生成二进制文件与Postman以二进制流的形式发送请求

    业务描述: 模拟终端(智能家居)发送HTTP POST请求,请求参数为二进制流:而且,二进制流是加密后的数据,因此调试分两步: 1.Java代码生成加密后数据,并保存为二进制流文件 (电脑上的图片就是 ...

  7. JVM性能调优的6大步骤，及关键调优参数详解

    JVM性能调优方法和步骤1.监控GC的状态2.生成堆的dump文件3.分析dump文件4.分析结果,判断是否需要优化5.调整GC类型和内存分配6.不断分析和调整JVM调优参数参考 对JVM内存的系统级 ...

  8. Matlab 信号与系统课设 - BiRadio仿真电台

    BiRadio Matlab 信号与系统课设 - BiRadio仿真电台 Author : Benjamin142857 Date : 2018-12 Video : BiliBili Github ...

  9. [Atcoder AGC037E]Reversing and Concatenating

    题目大意:有一个长度为$n$的字符串$S$,有$k$次操作,每次操作为把$S$变为$SS^R$(即翻转后再接在一起),然后从中选取一段长度为$n$的字串.问$k$次操作后,字典序最小的一种是什么.$n ...

  10. CentOS7 搭建 NFS 服务器

    环境: 系统版本:CentOS 7.5 一.服务端配置 1.配置环境 关闭防火墙服务 # 停止并禁用防火墙 $ systemctl stop firewalld $ systemctl disable ...