css权重值(重叠性)实例

  • css中有很多选择器,那在多个选择器都作用于同一个元素的情况下会出现什么效果呢? 代码
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title></title>

    <style type="text/css">

      p{

        color:red;

        font-size: 10px;

      }

      #wrap{

        color: deeppink;

        font-size: 30px;

      }

      .box{

        color:yellow;

        font-size: 50px;

      }

    </style>

  </head>

  <body>

    <p class='box' id="wrap">

       猜猜我是什么颜色

    </p>

  </body>

</html>

  • 执行可结果

  • 小结 : 出现这种效果是因为浏览器是根据权重值来判断使用哪种css样式的，权重值高的它的优先级会越高，就会呈现那种css样式,id选择器的权重值为100>类选择器10>标签选择器1,所以最终结果为id选择器设置的样式

  • 示列二 代码

!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title></title>

    <style type="text/css">

      *{

          color: cyan;

      }

      div {

          color: yellow;

      }

    </style>

  </head>

  <body>

    <div>

        <p class='box' id="wrap">

        猜猜我是什么颜色

        </p>

    </div>

  </body>

</html>
  • 执行结果

  • 小结 : 继承元素是没有权重值的,所以最终结果为通用选择器设置的样式

  • 实例三 代码

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title></title>

    <style type="text/css">

      p{

          color: yellow;

      }

      *{

          color: cyan;

      }

    </style>

  </head>

  <body>

    <div>

        <p class='box' id="wrap">

        猜猜我是什么颜色

        </p>

    </div>

  </body>

</html>

  • 执行结果

  • 小结 : 标签选择器的权重值是1,但是仍然大于通用选择器,所以最终结果为标签选择器设置的样式

  • 实例四 代码

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title></title>

    <style type="text/css">

      div p{

          color: yellow;

      }

      div>p{

          color: cyan;

      }

      p{

          color: red;

      }

    </style>

  </head>

  <body>

    <div>

        <p class='box' id="wrap">

        猜猜我是什么颜色

        </p>

    </div>

  </body>

</html>
  • 执行结果

  • 实例五 代码
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title></title>

    <style type="text/css">

      div>p{

          color: cyan;

      }

      div p{

          color: yellow;

      }

      p{

          color: red;

      }

    </style>

  </head>

  <body>

    <div>

        <p class='box' id="wrap">

        猜猜我是什么颜色

        </p>

    </div>

  </body>

</html>
  • 执行结果

权重值的计算

<!--有一个这样的结构：-->

<div class='wrap1' id='box1'>

    <div class="wrap2" id="box2">

        <p class='active'>GGG</p>

    </div>

</div>

<!--举几个例子看看他们的权重值：-->

p{color:gray;}							<!--权值为1-->

div div p{color:yellow;}                  <!--权值为1+1+1=3-->

.active{color:red;}                       <!--权值10-->

div .active{color:black;}			     <!--权值为11-->

div div .active{color:blue;}		     <!--权值为12-->

.wrap #box2 .active{color:purple;}        <!--权值为120-->

#box1 #box2 .active{color:green;}		 <!--权值为210-->

<!--由此可以看出，其实对于权重值的计算来说，首先它是不进位的，对于使用的选择器我们无非就是在数数，数选择器的数量(按照顺序来，先是id再是class，再是元素)，比如：-->

#box1 .wrap2 div{ color:red; } <!--权值为 1  1  1-->

注意：继承来的属性也有权重值，不过它的权值非常低,可以理解为继承的权重值最低。

!important 提升权重值实例

<!--我们在做网页代码时，有些特殊的情况需要为某些样式设置具有最高权重值，怎么办？比如我们知道内联样式的权重值是1000，比较大，那么我们可以使用!important来解决。-->

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>!important的使用</title>

        <style type="text/css">

            div{

                color:green !important;

            }

        </style>

    </head>

    <body>

        <div id="box" style="color:red;">

            <span>猜猜我是什么颜色</span>

        </div>

    </body>

</html>
  • 执行结果

  • 小结: 使用!important是一个坏习惯，应该尽量避免，因为这严重破坏了样式表中固有的权重值比较规则，使得在调试bug变得更加困难。当两条相互冲突的带有!important规则作用与同一个标签，那么拥有最大优先级的将会被采用。

什么情况下可以使用!important ?

  • 第一种

    • 你的网站上有一个设计了全站样式的css文件
    • 同时你或者你的小伙伴写了一些很差的内联样式

  • 第二种

    box p { color: blue; } p.awesome { color: red; }

    怎样才能使得文本的颜色变为红色？这种情况下，如果不适用!important.第一条规则永远大于第二条的规则。

总结

欢迎评论点赞交流,转发请添加原博客连接谢谢!

作 者：郭楷丰
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角 【推荐】一下。您的鼓励是博主的最大动力！
自 勉：生活，需要追求；梦想，需要坚持；生命，需要珍惜；但人生的路上，更需要坚强。带着感恩的心启程，学会爱，爱父母，爱自己，爱朋友，爱他人。

css 权重值(层叠性)详解的更多相关文章

  1. css 继承性和层叠性

    css有两大特性:继承性和层叠性 继承性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设置属性的.不会牵扯到方法的层面 ...

  2. 【WEB前端】CSS继承性和层叠性（极度重要）

    1.1 继承性 有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性. 哪些属性能继承? color. text-开头的.line-开头的.font-开头的. 这些关于文字样式的,都能 ...

  3. CSS position overflow float 属性 详解

    position  overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...

  4. CSS继承性和层叠性

    一. 继承性    1. 含义:从自己开始直到所包裹的最小的元素,都可以继承一些特有的属性.    2. 作用范围:  a. color.text-开头的.line-开头的.font-开头的,均可以继 ...

  5. css中的层叠性及权重的比较

    假如同一个标签被多个选择器选中,每个选择器都设置了相同的样式,浏览器中加载时这个样式听谁的? 不同选择器设置的同一个样式,只会选择一个进行加载,不会叠加. 为了解决听谁的问题,引入层叠性的概念. 层叠 ...

  6. css动画-animation各个属性详解（转）

    CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...

  7. 补充拓展：CSS权重值叠加

    都知道CSS选择器有权重优先级,权重大的优先展示. 但部分人可能不清楚,权重值也是可以叠加计算的 <!DOCTYPE html> <html> <head> < ...

  8. 前端 CSS 继承性和层叠性

    CSS有两大特性:继承性和层叠性 前端 CSS的继承性 前端 CSS层叠性 CSS选择器优先级 前端 CSS 优先级 样式设置important

  9. CSS系列 (05)：浮动详解

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. -- W3C 文字环绕 float可以 ...

随机推荐

  1. 用截取的部分图像创建新图像--关于cvGetSubRect，cvGetImage的用法

    CvMat* cvGetSubRect(const CvArr* arr, CvMat* submat, CvRect rect)可以把截取图像中需要的区域存入矩阵.把IplImage *传给arr, ...

  2. Echarts 关系图 添加点击事件

    /*实现的效果是:在关系图上加点击事件,点击某个点,得到改点代表的内容,并且实现一个跳转效果. 关键代码已用红色标出*/ <!DOCTYPE html> <html lang=&qu ...

  3. 七牛 python

    Python SDK使用指南 上传策略 变量 对象存储 API 参考手册 多媒体数据处理 API 参考手册

  4. 浅谈vue路由原理

    Vue的路由实现:hash模式 和 history模式 hash模式:在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取: 特点:hash虽然在UR ...

  5. MaCrea Lit Sphere maps

    http://www.zbrushcentral.com/showthread.php?92157-MaCrea-Material-Creation-Tool 这边提供几个可以获取MatCap贴图的网 ...

  6. 用WinDbg分析Debug Diagnostic Tool生成的Userdump文件

    1.下载WinDbg(Debugging Tools for Windows):http://www.microsoft.com/whdc/devtools/debugging/default.msp ...

  7. BZOJ2733：[HNOI2012]永无乡

    浅谈线段树合并:https://www.cnblogs.com/AKMer/p/10251001.html 题目传送门:https://lydsy.com/JudgeOnline/problem.ph ...

  8. bzoj 1043 下落的圆盘 —— 求圆心角、圆周长

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1043 求出每个圆没被覆盖的长度即可: 特判包含和相离的情况,注意判包含时 i 包含 j 和 ...

  9. hdu 1506 单调栈问题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1506 题目的意思其实就是要找到一个尽可能大的矩形来完全覆盖这个矩形下的所有柱子,只能覆盖柱子,不能留空 ...

  10. ubuntu dd烧录镜像文件

    df命令查看挂在的U盘和硬盘,ssd 右边可以看到路径 sudo dd if=cn_windows_10_multiple_editions_version_1703_updated_july_201 ...