网页学习(二)继续css

严格按照https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks学习

一.层叠与继承

1.冲突规则:

CSS扩写:Cascading Style Sheets (cascade 有层叠的意思)

层叠:一边来说写在后面的规则会被运用

继承:一般父元素的属性会继承到子元素,除非子元素自己定义了元素(一些属性不会继承)

像 widths (上面提到的), margins, padding, 和 borders 不会被继承。如果borders可以被继承,每个列表和列表项都会获得一个边框 — 可能就不是我们想要的结果!
哪些属性属于默认继承很大程度上是由常识决定的。
控制继承:
inherit
设置该属性会使子元素属性和父元素相同。实际上,就是 "开启继承".
initial
设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的,那么会设置为 inherit 。
unset
将属性重置为自然值,也就是如果属性是自然继承那么就是 inherit,否则和 initial一样

all可以重置所有值,但是IE不兼容

 

理解层叠:
有三个因素需要考虑,根据重要性排序如下,前面的更重要:

重要程度
优先级:比如类选择器高于元素选择器
资源顺序:后定义的生效
我们从下往上,看看浏览器是如何决定该应用哪个css规则的。


一个选择器的优先级可以说是由四个部分相加 (分量),可以认为是个十百千 — 四位数的四个位数:

千位: 如果声明在 style 的属性(内联样式)则该位得一分。这样的声明没有选择器,所以它得分总是1000。
百位: 选择器中包含ID选择器则该位得一分。(暂时理解应用一次的类选择器)
十位: 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
个位:选择器中包含元素、伪元素选择器则该位得一分。

这个描述形式像是字典序,优先生效。
有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算,不过需要很小心的使用 — !important。用于修改特定属性的值, 能够覆盖普通规则的层叠。

 

posted @ 2020-11-27 00:37  Faker_fan  阅读(79)  评论(0编辑  收藏  举报