CSS 样式的优先级

来源：互联网发布：华为校招知乎编辑：程序博客网时间：2024/06/06 02:05

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>

0 0