css级联与继承

xorpay 发布于2019-08-30 14:15 / 2328人阅读

摘要：级联级联，是的简写，说明级联是非常重要的。但是一般建议不使用因为它会改变级联的工作方式，使得调试变得困难。继承中有些规则将会默认被子元素继承，有些则不会。

级联

级联(The cascade)，CSS是Cascading Style Sheet 的简写，说明级联是非常重要的。从表层来看，级联表明CSS规则的顺序问题，但是级联远比这个复杂，在所有的选择器中某个选择器定义的规则是否能够胜出（即优先级）取决于三个元素：Importance，Specificity，Source order
①.!important声明(Importance)

在css规则的值末尾添加"!important"能够保证该规则优先其他规则。但是一般建议不使用"!important",因为它会改变级联的工作方式，使得调试变得困难。

例如：

This is a paragraph.

One selector to rule them all!

②.特性值 (Specificity)
通过4个特性值来量化一个选择器

Thousands

声明在元素的style属性中。特性值记为1000

Hundreds

包含在一个选择器中的所有ID选择器

Tens

包含在一个选择器中的所有类选择器，属性选择器，伪类选择器

Ones

包含在一个选择器中的所有元素选择器，伪元素选择器
③.代码顺序 (Source order)

如果多个竞争选择器具有相同的重要性和特性值，代码顺序就发挥作用了，后来规则优先前面规则。

继承（Inheritance）

CSS中有些规则将会默认被子元素继承，有些则不会。比如font系列属性，文本系列属性、列表系列属性，cursor
CSS提供了三个特殊的值用来处理继承
1) inherit 继承父元素的样式
2) initial 不继承。应用浏览器的默认样式
3) unset 不设定，表现该规则本来特性，即如果该规则具有继承属性则继承，否则不继承。

私有云 GPU服务器级联无限级联 ios级联 javascript级联

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

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

CSS札记（二）：级联与继承

摘要：一级联概念级联是的简写，说明级联是非常重要的。二继承中有些规则将会默认被子元素继承，有些则不会。应用浏览器的默认样式不设定，表现该规则本来特性，即如果该规则具有继承属性则继承，否则不继承。一、级联概念:级联（The cascade）,CSS是Cascading Style Sheet的简写，说明级联是非常重要的。从表层来看，级联表明CSS规则的顺序问题，但是级联远比这个复杂，在所有...

Caizhenhao 2019-08-30 14:20 评论0 收藏0
CSS札记（二）：级联与继承

摘要：一级联概念级联是的简写，说明级联是非常重要的。二继承中有些规则将会默认被子元素继承，有些则不会。应用浏览器的默认样式不设定，表现该规则本来特性，即如果该规则具有继承属性则继承，否则不继承。一、级联概念:级联（The cascade）,CSS是Cascading Style Sheet的简写，说明级联是非常重要的。从表层来看，级联表明CSS规则的顺序问题，但是级联远比这个复杂，在所有...

stonezhu 2019-08-02 10:04 评论0 收藏0
容易忽略的七个CSS知识点

摘要：样式声明通过一个称为级联的过程来解释和决定。级联级联可能是中最容易被弄错的属性之一。因此很容易认为元素的视觉边界等于其宽度，但情况并非如此。如果你在日常工作中使用CSS，那么你的主要目标很可能集中在使事情看起来是正确的。最终得到的正确结果远比如何实现更重要。这意味着相比正确的语法和视觉效果我们更少关注CSS的实现原理。你可能还没有意识到，但CSS的视觉效果通常是操纵隐藏属性的间接结...

chanthuang 2019-08-02 16:16 评论0 收藏0
容易忽略的七个CSS知识点

摘要：样式声明通过一个称为级联的过程来解释和决定。级联级联可能是中最容易被弄错的属性之一。因此很容易认为元素的视觉边界等于其宽度，但情况并非如此。如果你在日常工作中使用CSS，那么你的主要目标很可能集中在使事情看起来是正确的。最终得到的正确结果远比如何实现更重要。这意味着相比正确的语法和视觉效果我们更少关注CSS的实现原理。你可能还没有意识到，但CSS的视觉效果通常是操纵隐藏属性的间接结...

elina 2019-08-29 18:47 评论0 收藏0