编程教育资源分享平台

网站首页 > 后端开发 正文

HTML+CSS:掌握css的继承以及代码的优先级问题

luoriw 2024-02-01 14:26:58 后端开发 12 ℃ 0 评论

上边文章我们说了使用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,内联样式(style="color:#f00;")的权值为1000。

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

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

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


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

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表
最新留言