搜索
首页web前端css教程CSS样式覆盖规则的详细介绍

CSS样式覆盖规则的详细介绍

Mar 04, 2017 am 10:22 AM
css样式覆盖

大家都知道CSS的全称叫做“层叠样式表”,但估计很多人都不知道“层叠”二字的含义。其实,“层叠”指的就是样式的覆盖,当一个元素被运用上多种样式,并且出现重名的样式属性时,浏览器必须从中选择一个属性值,这个过程就叫“层叠”。样式覆盖(这种叫法更大众化些)遵循一定的规则,之前我对这个规则一直似懂非懂的,直到这几天看了”CSS: The Missing Manual”,才豁然开朗。下面是我的一些学习笔记。

首先需要明确的是,很多情况都会导致一个元素被运用上多种样式,样式覆盖的规则也需要根据不同的情况来定,具体规则如下。

规则一:由于继承而发生样式冲突时,最近祖先获胜。

CSS的继承机制使得元素可以从包含它的祖先元素中继承样式,考虑下面这种情况:

<html>
<head>
<title>rule 1</title>
<style>
body {color:black;}   
p {color:blue;}   
</style>
</head>
<body>
    <p>welcome to <strong>gaodayue的网络日志</strong></p>
</body>
</html>


strong分别从body和p中继承了color属性,但是由于p在继承树上离strong更近,因此strong中的文字最终继承p的蓝色。

规则二:继承的样式和直接指定的样式冲突时,直接指定的样式获胜。

在上面的例子中,假如还指定了strong元素的样式,如:

strong {color:red;}


那么根据规则二,strong中的文字最终显示为红色。

规则三:直接指定的样式发生冲突时,样式权值高者获胜。

样式的权值取决于样式的选择器,权值定义如下表。

CSS选择器 权值

标签选择器 1
类选择器 10
ID选择器 100
内联样式 1000
伪元素(:first-child等) 1
伪类(:link等) 10

可以看到,内联样式的权值>>ID选择器>>类选择器>>标签选择器,除此以外,后代选择器的权值为每项权值之和,比如”#nav .current a”的权值为100 + 10 + 1 = 111。

规则四:样式权值相同时,后者获胜。

考虑下面这种情况

<p

class="byline">Written   
 by <a

class="email"

href="mailto:jean@cosmofarmer.   
 com">Jean   
 Graine de Pomme</a></p>
12 .byline   
 a {color:red;}p   
 .email {color:blue;}


“.byline a”与”p .email”都直接指定了上面的a元素,且权值都为11,根据规则四,最终显示蓝色。

由于样式表可以是外部的,也可以是内部的,规则四提醒我们要注意外部样式表引入的顺序(及元素的顺序),以及外部样式表与内部样式表的出现位置。一般来说,内部样式表出现在所有外部样式表的引入之后,一般是在之前。

规则五:!important的样式属性不被覆盖。

!important可以看做是万不得已的时候,打破上述四个规则的”金手指”。如果你一定要采用某个样式属性,而不让它被覆盖的,可以在属性值后加上!important,以规则四的例子为例,”.byline a {color:red !important;}”可以强行使链接显示红色。大多数情况下都可以通过其他方式来控制样式的覆盖,不能滥用!important。

以上这篇CSS样式覆盖规则全面了解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持PHP中文网。

更多CSS样式覆盖规则的详细介绍相关文章请关注PHP中文网!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
我们如何标记Google字体并创建Goofonts.com我们如何标记Google字体并创建Goofonts.comApr 12, 2025 pm 12:02 PM

Goofonts是由开发人员和设计师丈夫签名的附带项目,它们都是版式的忠实拥护者。我们一直在标记Google

永恒的Web开发文章永恒的Web开发文章Apr 12, 2025 am 11:44 AM

Pavithra Kodmad向人们询问了他们认为是关于网络开发的一些最永恒的文章的建议

与部分元素的交易与部分元素的交易Apr 12, 2025 am 11:39 AM

同一天发表了两篇文章:

使用JavaScript API的状态练习GraphQl查询使用JavaScript API的状态练习GraphQl查询Apr 12, 2025 am 11:33 AM

学习如何构建GraphQL API可能具有挑战性。但是您可以学习如何在10分钟内使用GraphQL API!碰巧的是,我得到了完美的

组件级CMS组件级CMSApr 12, 2025 am 11:09 AM

当一个组件生活在数据查询居住在附近的数据查询的环境中时,视觉组件与

将类型设置在圆上...带偏移路径将类型设置在圆上...带偏移路径Apr 12, 2025 am 11:00 AM

这里是Yuanchuan的一些合法CSS骗局。有此CSS属性偏移路径。曾几何时,它被称为Motion-Path,然后被更名。我

'恢复”在CSS中有什么作用?'恢复”在CSS中有什么作用?Apr 12, 2025 am 10:59 AM

Miriam Suzanne在Mozilla开发人员的视频中解释了该主题。

现代恋人现代恋人Apr 12, 2025 am 10:58 AM

我喜欢这样的东西。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用