css样式优先权→css处理样式覆盖特性

2018-03-02  本文已影响70人  yuanhappy

css样式优先权→写法优先权
①行内样式表②内部样式表③外部样式表

css样式选择优先权
对于id与class而言,id的定义优先于class的定义,而具有class属性比没有class属性的优先权要大。
即:id > class >类型选择符
例:#header{} > .header > div{}
类型选择符、指网页中已有的标签名作为名称的选择符,例:body、div、li、ul等

HTML标签的权重是1,class的权重是10,id的权重是100
例:p的权重是1,"div em"的权重是1+1=2,"strong.demo"的权重是1+10=11,"#test.red"的权重是100+10=110

通过用空格分隔多个 class 属性,可让 HTML 元素应用多个 class 属性:
class="class1 class2"
注意:在 HTML元素中列出这些 class 的顺序并不重要。
然而,<style>部分中的 class 声明的顺序是重要的,第二个声明将始终优先于第一个声明。同一个样式后声明的会覆盖掉前面声明的样式

CSS 通过使用Important覆盖所有其他样式
color:pink !important;

<style>
body {background-color: black;font-family: Monospace;color: green;}
#orange-text {color: orange;}
.pink-text {color: pink !important;}  /*生效样式*/
.blue-text {color: blue;}
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

上一篇下一篇

猜你喜欢

热点阅读