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. 使用命令行生成 APNG 图片

    使用 apngasm 工具 下载地址 https://sourceforge.net/projects/apngasm/files/2.91/ 本地源码编译 make 或者 下载对应环境的可执行程序 ...

  2. QTableWidget设计原则

    一.组成结构: 列表控件由水平表头(self.horizontalHeader()).垂直表头(self.verticalHeader())和单元格(QTableWidgetItem)组成 其中表头又 ...

  3. python模块inspect.py

    inspect模块用来检查对象的类型(函数,属性,类,抽象基类,方法,模块等等) 是一个封装好的非常有用的模块. ]) ]: cls = :]: content = ] = lines[].lstri ...

  4. JAVA堆内存和栈内存初步了解

    一.堆内存和栈内存 程序运行时内存分配有三种:静态存储分配,栈式存储分配,堆式存储分配 1.静态存储分配: 在程序编译时就可以确定数据目标在运行时所需要的内存,因此在编译时就为其分配固定大小的内存. ...

  5. pandas 学习 —— pivot table

    0. DataFrame 的 index.columns.values >> df = pd.DataFrame(np.arange(6).reshape(3, 2), index=['o ...

  6. prufer BZOJ1211: [HNOI2004]树的计数

    以前做过几题..好久过去全忘了. 看来是要记一下... [prufer] n个点的无根树(点都是标号的,distinct)对应一个 长度n-2的数列 所以 n个点的无根树有n^(n-2)种 树 转 p ...

  7. 汇编题目：在屏幕中间显示a-z的所有字母，按ESC键改变字符颜色

    在屏幕中显示a-z字母,按ESC键改变字符颜色. ;程序功能:在屏幕中间同一点显示a-z的所有字符 ; 1.使用cpu循环空运行实现延迟 ; 2.按ESC键改变正在循环显示的字符的颜色 ; 3.程序完 ...

  8. POJ2080:Calendar(计算日期)

    Calendar Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 12842   Accepted: 4641 Descrip ...

  9. ss2

    一. *** 服务端配置 1. 在命令行窗口输入下面4行命令并回车执行 yum -y update yum install -y python-setuptools && easy_i ...

  10. python的WeakKeyDictionary类和weakref模块的其他函数

    python的WeakKeyDictionary类和weakref模块的其他函数 # -*- coding: utf-8 -*- # @Author : ydf # @Time : 2019/6/13 ...