继承
CSS的某些样式是具有继承性的,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签。
p{
color:red;
}
<p>三年级时,我还是一个<span>稚嫩的</span>小鲜肉。</p>
但注意,有一些css样式是不具有继承性的。如border:1px solid red;
p{
border:1px solid red;
}
<p>三年级时,我还是一个<span>稚嫩的</span>小鲜肉。</p>
在上面例子中它代码的作用只是给p标签设置了边框为1像素、红色、实心边框线,而对于子元素span是没用起到作用的。
特殊性
有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码:
p{
color:red;
}
.first{
color:green
;}
<p class="first">三年级时,我还是一个<span>稚嫩的</span>小鲜肉。</p>
p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。
下面是权值的规则:
- 标签的权值为1,
- 类选择符的权值为10,
- ID选择符的权值最高为100。
例如下面的代码:
p{
color:red; /*权值为1*/
}
p span{
color:green; /*权值为1+1=2*/
}
.warning{
color:white; /*权值为10*/
}
p span .warning{
color:purple; /*权值为1+1+10=12*/
}
层叠
如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办?遇到这类问题,我们可以采用层叠的思想去解决它。
层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。
如下面代码:
p{
color:red;
}
p{
color:green;
}
<p class="first">三年级时,我还是一个<span>稚嫩的</span>小鲜肉。</p>
最后 p 中的文本会设置为green,这个层叠很好理解,理解为后面的样式会覆盖前面的样式。
所以css样式中的优先级就不难理解了:
即: 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。