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

stonezhu 发布于2019-08-02 10:04 / 1376人阅读

摘要：一级联概念级联是的简写，说明级联是非常重要的。二继承中有些规则将会默认被子元素继承，有些则不会。应用浏览器的默认样式不设定，表现该规则本来特性，即如果该规则具有继承属性则继承，否则不继承。

一、级联

概念:级联（The cascade）,CSS是Cascading Style Sheet的简写，说明级联是非常重要的。从表层来看，级联表明CSS规则的顺序问题，但是级联远比这个复杂，在所有的选择器中摸个选择器定义的规则是否能够胜出（既优先级）取决于三个元素：Important,Specificity,Source order。

1、！Important声明（Important）

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

例如：

This is a paragraph.

One selector to rule them all

2、Specificity

通过四个特性值来量化一个选择器

2.1. Thousands

Inline style(嵌入式样式)，即直接写在元素里面，加1,0,0,0
例：

2.2. Hundreds

包含在一个选择器中所有的ID选择器
例：#div

2.2. Tens

包含在一个选择器中的所有 类属性选择器，类选择器，伪类选择器
例：.classes、[attributes]、#focus:hover

2.4. Ones

包含在一个选择器中的所有元素选择器，伪元素选择器
例： ::after

3、代码顺序 (Source order)

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

二、继承（Inheritance）

CSS中有些规则将会默认被子元素继承，有些则不会。比如font系列属性，文本系列属性、列表系列属性，cursor
CSS提供了三个特殊的值用来处理继承

1) inherit 继承父元素的样式    
2) initial 不继承。应用浏览器的默认样式    
3) unset 不设定，表现该规则本来特性，即如果该规则具有继承属性则继承，否则不继承。

GPU云服务器云服务器札记级联无限级联 ios级联

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

转载请注明本文地址：https://www.ucloud.cn/yun/52110.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规则的顺序问题，但是级联远比这个复杂，在所有的选择器中某个选择器定义的规则是否能够胜出...

xorpay 2019-08-30 14:15 评论0 收藏0
前端学习札记

摘要：学习工作中遇到的问题，和容易忘记的零碎知识，部分为摘抄，如若侵权，请告知。将构造函数的指向这个新创建的对象即将指向这个新对象。取消冒泡这种相当于全局取消事件冒泡。前端性能的优化避免全局查找，全局查找需要涉及作用域链上的查找。学习工作中遇到的问题，和容易忘记的零碎知识，部分为摘抄，如若侵权，请告知。 HTML篇 CSS篇 box-sizing：设置盒子模型为标准模式或者IE模式。属性...

piglei 2019-08-22 18:23 评论0 收藏0
前端学习札记

摘要：学习工作中遇到的问题，和容易忘记的零碎知识，部分为摘抄，如若侵权，请告知。将构造函数的指向这个新创建的对象即将指向这个新对象。取消冒泡这种相当于全局取消事件冒泡。前端性能的优化避免全局查找，全局查找需要涉及作用域链上的查找。学习工作中遇到的问题，和容易忘记的零碎知识，部分为摘抄，如若侵权，请告知。 HTML篇 CSS篇 box-sizing：设置盒子模型为标准模式或者IE模式。属性...

jkyin 2019-08-02 10:48 评论0 收藏0