zoukankan      html  css  js  c++  java
  • 通配符与标签!important的背景展示,也是让我怀疑人生了

    是谁在耳边对我说!important提升权重优先级,只为这一句,我用了3600s研究通配符与标签!important的背景展示,也是让我怀疑人生了!选择器权值:标签选择器1,类选择器和伪类选择器:10,ID选择器:100,通配符选择器:0,行内样式:1000,!important 在一定条件下,优先级最高。根据百度官方介绍body是用在网页中的一种HTML标签,那就说明它是个标签呀,然而通配符选择器(曾怀疑*不是,不过通配符选择器介绍)和标签body同时定义页面背景色,展示的却是通配符定义的,咋办?曰:/*如果非在通配符定义背景的前提下,让body背景颜色正常展示,加高*/,除了body外,其他标签正常展示,适用于这个css选择器优先级!

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>通配符背景色 PK body!important的背景色</title>
     7     <style type="text/css">
     8     *{  
     9         margin: 0;
    10         padding: 0;
    11         background-color: cadetblue;
    12     } 
    13     body{
    14         background-color: crimson;
    15         /* border: 10px solid blueviolet; */
    16         /* background-color: yellow!important; */
    17         height: 500px;/*如果非在通配符定义背景的前提下,让body背景颜色正常展示,加高*/
    18     }
    19     div{
    20         background-color: salmon;
    21     }
    22     p{
    23     background-color: #fff;
    24     }
    25     div.box{
    26         border: 1px dashed red;
    27         background-color:#f90;
    28     }
    29     div#box{
    30         color: #fff;
    31         background-color:rgb(20, 13, 14);
    32     }
    33     </style>
    34 </head>
    35 <body>
    36     <div class="box" id="box">
    37         人生充满了惊喜与感动,调整好心态,做最好的自己&nbsp;&nbsp; Life is full of surprises and emotions, adjust your mindset, and be your best self
    38     </div>
    39     <p>web is very much!web is very much!web is very much!web is very much!web is very much!web is very much!web is very much!web is very much!</p>
    40 </body>
    41 </html>
  • 相关阅读:
    IOS开发 网络发展史(NSURLProtocol)
    IOS开发 网络发展史(NSURLCach)
    IOS 开发 网络发展史(URLConnection)
    ios 网络开发(CFNetwork)
    MAC安装mysql
    conda 安装常用包
    从必应上拉取图片
    旋转数组中的二分查找
    东北大学 python模拟登录校园网(2019年6月启用新登录模式后)
    Ubuntu 安装Codeblocks
  • 原文地址:https://www.cnblogs.com/webaction/p/12342577.html
Copyright © 2011-2022 走看看