温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS优先级顺序是什么

发布时间:2020-12-08 12:44:20 来源:亿速云 阅读:188 作者:小新 栏目:web开发

这篇文章给大家分享的是有关CSS优先级顺序是什么的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

CSS顺序和优先级是样式化网页的一个具有挑战性的部分。您可能有一天会发现您尝试应用的CSS样式无效。看起来好像网页没有执行你的代码。这就可能是由CSS的顺序或优先级冲突引起的。本文将探讨什么是css顺序和优先级以及它们如何影响样式化网页。

优先级

浏览器决定哪些CSS属性值与元素相关。此规则基于CSS选择器如何组成不同类型的规则。优先级是确切的名称,它赋予特定CSS声明权重。每个声明的权重或“重要性”由等于匹配选择器的多个选择器类型确定。(推荐阅读:css优先级怎么计算和css样式优先级顺序)

优先级仅在一个元素具有多个声明时才适用,目标元素将根据选择器的固有值优先。这是一个用于衡量选择器值差异的列表:

类型选择器:这将是伪元素或类似h2,h2等的
类。类选择器:这些包括属性选择器和伪类,如:悬停等
.ID选择器:任何类型的ID选择器。

通用选择器对优先级没有任何影响,其中一些包括像(+, - ,>,〜)这样的组合选择器。我们之前提到过,内联样式(如粗体)将始终覆盖外部样式表中的样式,并且位于具有最高优先级的链的顶部。

在继续之前应该注意一些规则。在内联css中,html的样式属性首先是样式和css文件中的首要规则。特定选择器也将优先于较少指定的选择器。稍后在文档中的代码将覆盖先前设置的任何先前角色。

注意:!important例外

所有这些特殊性规则的例外是当您调用!important方法时。当调用它时,它将覆盖所有其他声明。虽然这有效,但这通常是不好的做法。它打破了工作表中的自然级联,并使调试变得困难。避免使用它的最佳做法很简单。首先,您需要查看特异性规则,以便在另一个样式元素之前查看优先级。如果您必须使用!important,请将其仅应用于单个页面,从而明智地使用它。

层叠性

您可以更好地使用Cascade,而不是使用!important方法。对于不熟悉CSS或层叠样式表的基本方面的任何人来说,层叠是如何将不同属性的值组合在一起的算法。

级联通过首先查找正在应用于元素或属性的所有CSS声明来工作。它从它的起源(声明它的地方)开始,然后是声明的重要性。之后它将计算特异性。嵌入在HTML文件中的任何CSS都将遵循外部样式表,无论顺序如何。重要的是要实现级联将采取的步骤。

总的来说,如果竞争风格元素之间存在冲突,则需要考虑特殊性问题。如果一个元素的行为方式与你没有编码的方式相同,那么它就是从优先级更高的东西继承样式。以最小的特异性开始您的样式设计,以确保不会发生此问题。

感谢各位的阅读!关于CSS优先级顺序是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI