• Css的优先级机制


    样式的优先级

    多重样式(Multiple Style):如果外部样式、内部样式、内联样式同时应用于同一个元素,就是使用多重样式的情况。

    一般情况优先级如下:

    (外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style

    有一个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。

    示例如下:

    <head>
        <style type="text/css">
          /* 内部样式 */
          h3{color:green;}
        </style>
     
        <!-- 外部样式 style.css -->
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <!-- 设置:h3{color:blue;} -->
    </head>
    <body>
        <h3>测试!</h3>
    </body>

    选择器的优先级:

    内联样式表的权值最高1000,

    ID选择器的权值为100,

    class类选择器的权值为10,

    html标签选择器的权值为1

    CSS优先级法则:

    A选择器都有一个权值:权值越大越优先。

    B当权值相等时,后出现的样式表设置要优先于先出现的样式表设置。

    C网页编写者设置的css样式的优先权高于浏览器设置的样式

    D继承的CSS样式不如后来指定的CSS样式

    E在同一组属性设置中标有"!important"规则的优先级最大;

    <html>
      <head>
        <style type="text/css">
         #redP p{
            /*两个color属性在同一组*/
            color:#00f !important; /* 优先级最大 */
            color:#f00;
         }
        </style>
      </head>
      <body>
         <div id="redP">
           <p>color</p>
           <p>color</p>
         </div>
      </body>
    </html>
  • 相关阅读:
    网络安全之常见攻击
    引入element-ui
    引入sass
    浏览器解析流程
    JDK8 HashMap--removeNode()移除节点方法
    JDK8 HashMap--treeify()树形化方法
    JDK1.8 HashMap--treeifyBin()方法
    二叉查找树ADT
    队列ADT

  • 原文地址:https://www.cnblogs.com/zhaoleigege/p/5201018.html
Copyright © 2020-2023  润新知