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. Selenium-几种操作

    元素定位之后就要对它进行操作了,常见的集中操作如下: click() 点击元素 eg.输入内容后,点击操作 send_keys("内容") 模拟按键输入 eg:百度输入框,输入内容 ...

  2. python习题-替换敏感词

    #3.有一个文件,里面有一些敏感词汇,如下,如果输入这些词,就用**代替,#然后输出,例如输入今天没吃饭,碰到一个傻逼,原来那个sb是小明.输出今天没吃饭,碰到一个**,原来那个**是小明.#需求分析 ...

  3. java-StringBuffer常用方法

    对字符串进行修改的时候,需要使用可变长字符串StringBuffer 和 StringBuilder 类. append(String s):将指定的字符串追加到此字符序列. Reverse():将此 ...

  4. Convolutional Neural Networks for Visual Recognition 2

    Linear Classification 在上一讲里,我们介绍了图像分类问题以及一个简单的分类模型K-NN模型,我们已经知道K-NN的模型有几个严重的缺陷,第一就是要保存训练集里的所有样本,这个比较 ...

  5. NOI 模拟赛 #2

    得分非常惨惨,半个小时写的纯暴力 70 分竟然拿了 rank 1... 如果 OYJason 和 wxjor 在可能会被爆踩吧 嘤 T1 欧拉子图 给一个无向图,如果一个边集的导出子图是一个欧拉回路, ...

  6. ACM学习历程—Hihocoder 1233 Boxes(bfs)（2015北京网赛）

    hihoCoder挑战赛12 时间限制:1000ms 单点时限:1000ms 内存限制:256MB   描述 There is a strange storehouse in PKU. In this ...

  7. [转]为什么GOF的23种设计模式里面没有MVC？

    GoF (Gang of Four,四人组, <Design Patterns: Elements of Reusable Object-Oriented Software>/<设计 ...

  8. jquery--find与children方法的区别

      children方法: find方法: 通过以上的解释,可以总结如下: 1:children及find方法都用是用来获得element的子elements的,两者都不会返回 text node,就 ...

  9. 洛谷【P1619】 解一元二次方程的烦恼

    我对模拟的理解:https://www.cnblogs.com/AKMer/p/9064018.html 题目传送门:https://www.luogu.org/problemnew/show/P16 ...

  10. cs2008中头文件交叉编译的问题

    使用全局变量 使用基类指针定义在头文件中,在实际使用中强制转型为需要的指针,当然应该也可以存为空指针.