范仁义css3课程---5、css的继承、层叠和特殊性

范仁义css3课程---5、css的继承、层叠和特殊性

一、总结

一句话总结：

css的一些样式有继承性，会被子元素继承。对标签设置的多个相同属性的样式会应用权值最高的样式，权值一样的时候，就应用最后出现的。可以用!important将某样式设置为最高权限。

 

1、css中样式的继承是怎么回事？

1、css的某些样式是具有继承性的，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如一些字体样式

2、要注意有一些css样式是不具有继承性的。如border:1px solid red;

 

 

2、常见选择器的权值？

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100

 

3、样式 #footer .note p{color:yellow;} 的权值是多少？

权值为100+10+1=111

 

4、css中的层叠是怎么回事？

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

 

 

5、css样式优先级 是怎样的？

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）

 

 

6、我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？

我们可以使用!important来解决，例如：p{color:red!important;}

 

 

二、CSS的继承、层叠和特殊性

博客对应课程的视频位置：5、css的继承、层叠和特殊性
https://www.fanrenyi.com/video/10/32

 

1、css样式的继承

CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于div标签，这个颜色设置不仅应用div标签，还应用于div标签中的所有子元素文本，这里子元素为p标签。

    <div>
        成功的花
        <p>
            成功的花, 人们只惊慕她现时的明艳! 然而当初她的芽儿, 浸透了奋斗的泪泉, 洒遍了牺牲的血雨!
        </p>
    </div>

但注意有一些css样式是不具有继承性的。如border:1px solid red;

字体样式一般都是可以继承的，边框这些样式一般都是不可以继承的。

现在大家所学css样式还少，这里就不总结 哪些样式可以继承哪些不可以 了。

大家在css的学习过程中 稍微留意一下就好了，注意多用chrome查看 元素的样式。

 

 

2、优先级

就近原则

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

 

 

3、css样式的权值

根据权值来判断使用哪个css样式
浏览器是根据权值来判断使用哪种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*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低

 

 

4、层叠

我们来思考一个问题：如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？好，这一小节中的层叠帮你解决这个问题。
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
如下面代码:
p{color:red;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。

 

 

5、重要性

我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。
如下代码：
p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
这时 p 段落中的文本会显示的red红色。
注意：!important要写在分号的前面