Heim >Web-Frontend >HTML-Tutorial >写给初学者css优先级问题_html/css_WEB-ITnose
首先需要搞清楚几个基本概念<br /> 1.内嵌样式:<br /> 写在元素标签内的例如:<div style="background-color:red"> </div><br /> 2.内联样式:<br /> 写在head的style例如:<head><br /> <style><br /> div{<br /> background-color:red;<br /> }<br /> </style><br /> </head><br /> 3.外部样式:<br /> link标签引入进来的例如:<link rel="stylesheet" href="1.css"/><br /> 4.important:只要设置了important的优先级永远最高。例如:border:1px solid red !important; <br /> 优先级:!important > 内嵌(标签内)> 内联(style)=外部;<br />说明:这里很多初学者都会误会内联优先级要高与外部,实际上是相等的。例如:<br /> <head><br /> <link rel="stylesheet" href="1.css"/>//名为1的css文件中有div{background:blue;}<br /> <style><br /> div{
background-color;red;<br /> }<br /> </style><br /> </head><br /> 此时div的背景色为red;<br />
<head><br /> <style><br /> div{
background-color;red;<br /> }<br /> </style><br /> <link rel="stylesheet" href="1.css"/>//名为1的css文件中有div{background:blue;}<br /> </head>
此时div的背景色为blue;<br />
选择器权重值:内嵌:1000;<br /> id:0100;<br /> class或伪类:0010;<br /> 元素或伪元素:0001;<br /> *:0000;<br />说明:权重值越大优先级越高;权重值可以累加,但是不会越位,例如:<br /> 嵌套十层div,然后有一个div元素选择器,该选择的权重值为000 10,而不是0010,仍旧比class或伪类选择器的权重值小。
权重值:内嵌(1000)>id(0100)>class/伪类(0010)>元素/伪元素(0001)> * 权重值越高优先级越高。 important永远最高。