zoukankan      html  css  js  c++  java
  • CSS 样式的优先级小结

    1. 同一元素引用了多个样式时,排在后面的样式属性的优先级高

    例如,下面的 div,同时引用了 [.default] 和 [.user] 中的样式,其中 [.user] 样式中的 width 属性会替换 [.default] 样式中的 width 属性。

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
            .default{
               width: 100px; /* 定义 width 属性 */
               height: 100px; 
               background-color: #B6E0AE; 
               margin: -50px 0 0 -50px; 
               position: absolute;
               top: 50%; 
               left: 50%; 
            }
            .user{
               width: 150px; /* 这里 width 的值替换了前面 width 的值 */           
            }
        </style>
    </head>
    <body>
        <div class="default user"></div>
    </body>
    </html>

    2. 样式选择器的类型不同时,优先级顺序为:id 选择器 > class 选择器 > 标签选择器

    例如,下面的 div 即获取 id 选择器对应的样式,又获取 class 选择器对应的样式,其中

    id 选择器 [#mydiv] 的样式属性(width),优先于 class 选择器 [.user] 中的样式属性(width);

    class 选择器 [.user] 中的样式属性(background-color),优先于标签选择器 [div] 中的样式属性 (background-color)。

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
            #mydiv{
               width: 100px;     
               height: 100px;
               margin: -50px 0 0 -50px; 
               position: absolute;
               top: 50%;
               left: 50%;  
            }
            .user{
               width: 500px; /* #mydiv 中已定义 width 属性,这里的 width 无效 */
               background-color: #B6E0AE; 
            }
            div{
               background-color: #000000; /* .user中已定义 background-color 属性,这里的 background-color 无效 */
            }
        </style>
    </head>
    <body>
        <div id="mydiv" class="user"></div>
    </body>
    </html>

    3. 标签之间存在层级包含关系时,后代元素会继承祖先元素的样式。如果后代元素定义了与祖先元素相同的样式,则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级比较低,至少比标签选择器的优先级低

    例如,下面 id = "child" 的子 div,部分样式继承自 id = "parent" 的父 div,而其新定义的样式属性又会覆盖父元素的样式属性。

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
            #parent{
               width: 100px; 
               height: 100px; 
               background-color: #B6E0AE; 
               margin: -50px 0 0 -50px; 
               position: absolute;
               top: 50%;
               left: 50%;
            }
            #child{
                /* 继承了父元素的 width 等属性 */
                height: 60px;  /* 这里的 height 覆盖了父元素的 height 属性 */
                background-color: #A7CCEF; /* 这里的 background-color 属性覆盖了父元素的 background-color 属性 */
            }
        </style>
    </head>
    <body>
        <div id="parent">
            <div id="child" style="font-size:12px;">子元素</div>
        </div>
    </body>
    </html>

    4. 带有 !important 标记的样式属性的优先级最高

    例如,下面的 div 的样式属性中,带有 !important 标记的样式属性(width)会替换其他的(width)。

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
            #parent{
               width: 100px; 
               height: 100px; 
               background-color: #B6E0AE; 
               margin: -50px 0 0 -50px; 
               position: absolute;
               top: 50%;
               left: 50%;
            }
            #child{
                /* 继承了父元素的 width 等属性 */
                height: 60px;  /* 这里的 height 覆盖了父元素的 height 属性 */
                background-color: #A7CCEF; /* 这里的 background-color 属性覆盖了父元素的 background-color 属性 */
            }
            div{
                width: 150px !important; /* 此时的 width 属性优先级最高,不会被其他的 width 属性覆盖 */
            }
        </style>
    </head>
    <body>
        <div id="parent">
            <div id="child" style="font-size:12px;">子元素</div>
        </div>
    </body>
    </html>

    5. 样式表的来源不同时,优先级顺序为:内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

    例如,下面的 div 的样式有多个来源,其中内联样式 font-size 的优先级最高,外部样式中的 width 属性,优先级比内部样式中的 width 属性的优先级要低。

    /* main.css 文件 */
    #parent { width: 300px; }
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <link type="text/css" rel="stylesheet" href="main.css" />
        <style type="text/css">
            #parent{
               width: 100px;  /* 这里的 width 属性替换了 main.css 文件中定义的 width 属性 */
               height: 100px; 
               background-color: #B6E0AE; 
               margin: -50px 0 0 -50px; 
               position: absolute;    
               top: 50%;
               left: 50%;
            }
            #child{
                height: 60px; /* 覆盖父元素的 height 属性 */
                background-color: #A7CCEF; 
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        <div id="parent">
        <!--内联样式 font-size 优先级比 <style></style> 中的 font-size 优先级高 -->
        <!--chrome 浏览器默认的 font-size 至少是 12px,即使这里设置为小于 12px,浏览器还是显示 12px-->
            <div id="child" style="font-size:20px;">子元素</div>
        </div>
    </body>
    </html>

    附:如何用 jQuery 选择器来选择 class 中有多个值的元素,如 class="a b c" 的元素?

    下面 div 的 class 属性中包含多个值,可以按以下方式来查找这样的 div:

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            function myClick() {
                //按属性选择器的方式来选择
                $("[class='ancestor parent child']").css("color", "red");
    
                //直接列出各个类名来选择(顺序可以互换)
                $(".ancestor.parent.child").css("color", "red");
                //打乱顺序后,也可以找到同样的元素
                $(".child.parent.ancestor").css("color", "red");
    
                //注意:选择器中间不能随便加空格(空格后面的元素表示后代元素),如:
                $(".ancestor .parent .child").css("color", "red"); //可以找到 div
                $(".child .parent .ancestor").css("color", "red"); //找不到任何元素
    
                //依次过滤来选择
                $(".ancestor.parent").filter(".child").css("color", "red");
                $(".ancestor").filter(".child").css("color", "red");
    
                //也可以用 find() 来查找满足条件的 所有的后代元素
                $(".ancestor.parent").find(".child").css("color", "red");
    $(".ancestor").find(".child").css("color", "red");
    } </script> </head> <body> <form action="http://www.bing.com/search"> <div> <div class="ancestor parent child"> <div class="child">test0</div> <span class="child">test1</span> </div> <div class="ancestor">test2</div> <div class="parent">test3</div> <div class="child">test4</div> <input type="button" onclick="myClick();" value="点击" /> </div> </form> </body> </html>

     注:《HTML5程序设计》这本书上有更详细的介绍

  • 相关阅读:
    tyvj 1031 热浪 最短路
    【bzoj2005】 [Noi2010]能量采集 数学结论(gcd)
    hdu 1394 Minimum Inversion Number 逆序数/树状数组
    HDU 1698 just a hook 线段树,区间定值,求和
    ZeptoLab Code Rush 2015 C. Om Nom and Candies 暴力
    ZeptoLab Code Rush 2015 B. Om Nom and Dark Park DFS
    ZeptoLab Code Rush 2015 A. King of Thieves 暴力
    hdoj 5199 Gunner map
    hdoj 5198 Strange Class 水题
    vijos 1659 河蟹王国 线段树区间加、区间查询最大值
  • 原文地址:https://www.cnblogs.com/hellowzl/p/5841587.html
Copyright © 2011-2022 走看看