资讯专栏INFORMATION COLUMN

CSS札记(二):级联与继承

stonezhu / 1357人阅读

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

一、级联

概念:级联(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 不设定,表现该规则本来特性,即如果该规则具有继承属性则继承,否则不继承。 

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

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

相关文章

  • CSS札记):联与继承

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

    Caizhenhao 评论0 收藏0
  • css联与继承

    摘要:级联级联,是的简写,说明级联是非常重要的。但是一般建议不使用因为它会改变级联的工作方式,使得调试变得困难。继承中有些规则将会默认被子元素继承,有些则不会。 级联 级联(The cascade),CSS是Cascading Style Sheet 的简写,说明级联是非常重要的。从表层来看,级联表明CSS规则的顺序问题,但是级联远比这个复杂,在所有的选择器中某个选择器定义的规则是否能够胜出...

    xorpay 评论0 收藏0
  • 前端学习札记

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

    piglei 评论0 收藏0
  • 前端学习札记

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

    jkyin 评论0 收藏0

发表评论

0条评论

stonezhu

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<