页面制作者可以对html使用多个样式表
用户也能自己提供样式
浏览器也有默认样式
而且,还可以有多个选择器应用到同意元素。
那么,一个元素到底听谁指挥?
---引入层叠概念
假设页面上有个<h1>元素,浏览器想知道这个元素的font-size属性,它会这么做:
- 浏览器会先收集所有样式表(Web页面作者规定的font-size属性,读者自己增加的,浏览器默认的样式。)
- 找到所有匹配的声明.浏览器会搜索所有含<h1>元素的选择器的font-size声明。检查所有样式表,找出所有匹配<h1>且有font-size属性的规则.
- 对所有匹配的规则排序.页面作者写的规则>读者的>浏览器默认的
- 按特定性对声明排序.一个规则能更准确选择一个元素,它就更特定.("blockquote h1"就比“h1”teding )
- 最后,对于冲突的规则,按照它们在各自样式表中的出现的顺序排序.
特定性的计算
0 0 0
在选择器中(每个id加1分) (每个类/伪类加1分)(每个元素名加1分)
- #得1分
伪类 a:link
/visited/
hover/
active/focus/first-child/last-child等 得1分
- class得1分
例如
选择器"h1"中只有一个元素,得分001
“h1.blue”有一个元素一个类,得分011
ol li p (003)
a:link(011)
spand.cd(011)
#elixirs h1(101)
数值越大越具有特定性.
还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。
如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办?-----再次引入层叠概念
层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。
如下面代码:
p{color:red;} p{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
所以前面的css样式优先级就不难理解了:
内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)●════════════════════════════!imprtant═════════════════════════════════●
读者的!imprtant放在属性最后
hi{
font-size:200%
!important;
}
我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决。
如下代码:
p{color:red!important;}
p{color:green;}
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
这时 p 段落中的文本会显示的red红色。
注意:!要写在red后面,important写在分号前面
这里注意当网页制作者不设置css样式时,浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式,比如有的用户习惯把字号设置为大一些,使其查看网页的文本更加清楚。这时注意样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important优先级样式是个例外,权值高于用户自己设置的样式。