上边文章我们说了使用css的三种不同的选择器，本篇文章我们主要介绍css的继承规则以及css代码的权重优先级问题。

（1）css的继承规则

CSS的某些样式代码是具有继承性的，那么究竟什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：我们设置p标签的字体颜色为红色并添加1像素的红色边框。

在网页中的显示效果就如下图所示：

从上边的图片你可以看出字体颜色为红色不仅使p标签中的文字变成了红色，还应用于p标签中的所有子元素文本，这里子元素为span标签。但是边框属性并没有应用到子元素中去。

经过我们总结测试，可以得出以下结论：

• 关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。

• 关于盒子、定位、布局的属性，都不能继承。

（2）css代码的权重优先级

css就像工程师一样是很严谨的，有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码：

上边的代码中，p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？#0f0是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。

下面是权值的规则：

标签（div、p、span等）的权值为1，类选择符（.xxx）的权值为10，ID选择符（#xxx）的权值为100，内联样式的权值为1000。

我们来做一个权重的拔高练习，观察以下代码看一下p标签以及span标签内的文字显示颜色应该是什么？

由上边我们可以看出来，p标签的样式中#second的权值最高为100，那么p的文字颜色为yellow，而span标签样式中内联样式权值最高为1000，那么span的文字颜色就为#000。我们的结果就会如下图所示：

对于css的继承以及代码优先级的问题我们今天就先介绍到这里，大家在平时可以自己多加练习练习，自己多写几个权重的例子尝试尝试。

每日金句：人若有志，就不会在半坡停止。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。最后

最后，如果有想一起学习web前端，HTML5及JavaScript的可以来一下我的前端群733581373，好友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时的讲一些前端的炫酷特效，及前端直播课程学习

如果想看到更加系统的文章和学习方法经验可以关注的微信号：‘web前端技术圈’或者‘webxh6’关注后回复‘2018’可以领取一套完整的学习视频