都知道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笔记】第二章 组合管理

    2.1 什么是产品组合 Product Portfolio 什么是组合管理,讲述的是完成正确的项目, 五大目标 财务稳健,财务目标 管道平衡,资源需求与可用资源之间的平衡 战略协同,与经营战略 组织战 ...

  2. 深入理解虚拟机、容器和 Hyper 技术

    本文首先介绍了操作系统,然后引出容器技术以及虚拟机技术,最后介绍了 Docker 和 Hyper 技术.通过本文可以清楚地对三者有感性认识. 操作系统概述 我们可以把操作系统简化为: 操作系统 = 内 ...

  3. 【linux】查看端口占用情况

    netstat -nlp | grep "端口号"

  4. linux减少服务器带宽的方法

    linux减少服务器带宽的方法用百度静态资源公共库http://cdn.code.baidu.com/ 不仅可以不使用服务器流量 而且还有cdn加速比方说http://apps.bdimg.com/l ...

  5. 1.4 Linux下对lvm逻辑卷分区大小的调整(针对xfs和ext4不同文件系统)

      当我们在安装系统的时候,由于没有合理分配分区空间,在后续维护过程中,发现有些分区空间不够使用,而有的分区空间却有很多剩余空间.如果这些分区在装系统的时候使用了lvm(前提是这些分区要是lvm逻辑卷 ...

  6. 001 SringBoot基础知识及SpringBoot整合Mybatis

    1.原有Spring优缺点分析 (1)优点 Spring是Java企业版(Java Enterprise Edition,JEE,也称J2EE)的轻量级代替品.无需开发重量级的Enterprise J ...

  7. SET key value [EX seconds] [PX milliseconds] [NX|XX]

    SET key value [EX seconds] [PX milliseconds] [NX|XX] 可用版本: >= 1.0.0 时间复杂度: O(1) 将字符串值 value 关联到 k ...

  8. Java开发笔记(一百四十九)引入预报告的好处

    前面介绍了各种SQL语句的调用过程,虽然例子代码写死了每个SQL串,但是完全可以把查询条件作为方法参数传进来.比如现在想删除某个课程的教师记录,那么在编写删除方法时,就把课程名称作为该方法的一个输入参 ...

  9. golang http及其他标准库

  10. vue 路由跳转带参 方式query ,params

    a.vue向b.vue传值 a.vue this.$router.push({ path: '/payType', query: { putUpList: this.putUpList, name:' ...