在页面布局的时候,往往采用的是分级布局,如果对每一块内容均单独进行样式编辑,修改会非常麻烦,而且调试困难。对于这种情况,我们往往会经常遇到,所以我们编辑样式的策略就是会选择大级别进行样式编辑,然后对个别小级别样式做修改,CSS具有一定的继承特性,这里采用background-color为例说明。
▪ 最低优先级:body元素。这个主要定义总体样式,对于单独的css-style编写,需要写在html布局的开头。
<style>
body{
background-color : black;
}
</style>
这里整个页面的背景颜色就会呈现黑色,body是最大的元素也是优先级最低的元素,所有的子块样式都可以覆盖他的样式。
▪ 下一级优先级:h1等其他元素,这些元素进行css编写时会覆盖body里的样式定义。
<style>
body{
background-color:black;
}
h1{
background-color:orange;
}
</style>
<h1> Hello World </h1>
这是h1的背景将会显示为橙色,而不是黑色。
▪ 下一级优先级:class类,当元素的样式确定后,若添加类样式,则会覆盖当前元素的样式。
<style>
body{
background-color:black;
}
h1{
background-color:orange;
}
.red-ground{
background-color:red;
}
</style>
<h1 class = “red-ground”>helloworld</h1>
这里要注意有多个class类的情况,完全有style里面写class的一个顺序决定,先写的class优先级一定比后写的class优先级低。
<style>
body{
background-color:black;
}
h1{
background-color:orange;
}
.red-ground{
background-color:red;
}
.green-ground{
background-color:green;
}
</style>
<h1 class = “red-groundgreen-ground”>hello world</h1>
这个时候,green-ground写在red-ground的后面,所以green-ground优先级比前者高,背景显示green。
▪ 下一级优先级:id,在整个页面中,一般情况id是唯一的,所以当他存在的时候,会覆盖掉class类的样式。
<style>
body{
background-color:black;
}
h1{
background-color:orange;
}
.red-ground{
background-color:red;
}
.green-ground{
background-color:green;
}
#yellow-ground{
background-color:yellow;
}
</style>
<h1 class = “red-groundgreen-ground” id=”yellow-background”>hello world</h1>
这里背景显示为黄色。
▪ 下一级优先级:行内样式in-line style,前面说的均是在<style></style>里面的声明,当采用行内样式时,会覆盖之前所有定义在style里面的样式。
<h1 class = “red-groundgreen-ground” id=”yellow-background” style=”background:blue”>helloworld</h1>
▪ 最高优先级:!important,也被成为绝对优先级,这个使用是因为当你使用外面的库时,这些库很可能会覆盖自己的样式,采用这种方法能够保证100%是当前定义的样式。
<style>
body{
background-color:black;
}
h1{
background-color:orange;
}
.red-ground{
background-color:red !important;
}
.green-ground{
background-color:green;
}
#yellow-ground{
background-color:yellow;
}
</style>
<h1 class = “red-groundgreen-ground” id=”yellow-background”>hello world</h1>
这样这个背景就一定显示为红色。
总的来说,CSS样式的继承优先级顺序为:body < 元素 < class < 后面的class < id < 行内样式 < !important,只要记住先定整体样式,再局部修改。