CSS Selector覆盖顺序

bigdevil_s 发布于2019-08-29 11:09 / 938人阅读

摘要：我们都知道的定义是可以被覆盖的，但是覆盖的顺序可能并不清楚，本文的目的就在于介绍的覆盖顺序。之间的优先级顺序以下是不同之间的优先级，选择器。终极覆盖法关键字能够覆盖一切定义，无视前面提到的优先级顺序。

我们都知道CSS的定义是可以被覆盖的，但是覆盖的顺序可能并不清楚，本文的目的就在于介绍CSS的覆盖顺序。

三种类型CSS的优先级顺序

CSS有三种类型:

inline style：以style属性的形式直接写在标签上的

embedded style：写在html文件的里的

external stylesheet：引用的外部css文件

这三种类型的CSS的优先级就是上面所讲的顺序。将通俗点就是inline style肯定会覆盖embedded style的定义，而embedded style肯定会覆盖external stylesheet的定义。

当然，如果引用多个external stylesheet的话，那么后面的也会覆盖前面的。

CSS selector之间的优先级顺序

以下是不同selector之间的优先级:

The ID selector，ID选择器。#a{...}

The attribute selector，属性选择器。a[target=_blank]{...}

The class selector，类选择器。.classa{...}

The child selector，子元素选择器。table > tr {...}

The adjacent sibling selector，相邻元素选择器。.classa + .classb {...}

The descendant selector，儿孙辈选择器。div td {...}

The type selector，元素类型选择器。input{...}

同样，在相同的选择器类型之间后面的会覆盖前面的定义。

终极覆盖法

!important关键字能够覆盖一切定义，无视前面提到的优先级顺序。

比如:color:red !important;。不论这段CSS写在什么地方，还是以什么selector出现，都会覆盖其他的CSS定义。

参考资料

http://www.w3.org/TR/selector...

http://www.alternategateways....

GPU云服务器云服务器 Selector 重载覆盖覆盖方法覆盖样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111458.html

关于CSS的个人理解

摘要：的个人理解一概念层叠样式表，主要由属性和属性值组成。如何应用内联样式优先级最高，但由于会造成代码冗余及代码更新任务庞大，一般不采用。声明块格式的丢失最易导致错误。当浮动元素无法承载子元素的时候，子元素会在下一行显示。浮动元素的无法合并。 CSS的个人理解一、概念层叠样式表，主要由属性和属性值（value）组成。（虽然HTML、CSS对代码大小写不敏感，但是属性和属性值对代码大小写是...

Rango 2019-08-30 14:16 评论0 收藏0
编码规范-css.md

摘要：单行规则声明只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。命名名称中只能出现小写字符和破折号不是下划线，也不是驼峰命名法。设置文件编码为。其他参考网址编码规范的优先级机制浏览器加载，解析，渲染标签写在前面对于不同的编程语言来说，具体的编码规范各不相同，但是其宗旨都是一致的，就是保证代码在高质量完成需求的同时具备良好的可读性、可维护性。本文大部分内容来自网...

ARGUS 2019-08-29 13:06 评论0 收藏0
CSS编码规范

摘要：代码风格文件建议文件使用无的编码。解释编码具有更广泛的适应性。示例空格强制选择器与之间必须包含空格。示例字号强制需要在平台显示的中文内容，其字号应不小于。示例响应式强制不得单独编排，必须与相关的规则一起定义。转载：原地址 1 前言 CSS作为网页样式的描述语言，在百度一直有着广泛的应用。本文档的目标是使CSS代码风格保持一致，容易被理解和被维护。虽然本文档是针对CSS设计的，...

flyer_dev 2019-08-28 18:04 评论0 收藏0
代码质量管理——如何写出优雅地代码

摘要：高内聚不应该将没有任何联系的东西堆到一起。高内聚是值得要的，因为它意味着类可以更好地执行一项工作。高内聚有助于缓解高耦合，高耦合是需要高内聚的标志。对于开发者来说，高内聚通常比低耦合更有帮助，尽管两者通常可以一起完成。作为一个刚写代码不久的小菜鸟，工作的半年多让我越发意识到提高代码质量的重要性。从前只会关注实现功能，慢慢的开始关注性能，现阶段则发现其实还有很多细节也是（如可读性、易用...

Miracle_lihb 2019-08-30 14:01 评论0 收藏0