层叠与继承

1、层叠

Stylesheets cascade（样式表层叠） — 简单的说，css 规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。

2、优先级

浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。

（1）选择器类型

• ID 选择器(#id)
• 类选择器(.class)
• 属性选择器([type="input"])
• 伪类(:hover)
• 类型/标签选择器(h1、p)
• 伪元素(::before)
• 其他（不影响优先级）
  • 通配选择符(*)
  • 关系选择符
    • 相邻兄弟选择符(h1+p)
    • 子元素选择符(div>p)
    • 后代选择符(div p)
    • 所有同级元素选择器(h1~p)

（2）!important 例外规则

当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。

优先级：!important > 内联样式 > 外部样式

3、继承

继承也需要在上下文中去理解 —— 一些设置在父元素上的 css 属性是可以被子元素继承的，有些则不能。

一些属性是不能继承的 — 举个例子如果你在一个元素上设置 width 50% ，所有的后代不会是父元素的宽度的 50% 。如果这个也可以继承的话，CSS 就会很难使用了!

可自动继承属性：

• 字体系列属性(font, font-family, font-weight, font-size, font-style, font-variant, font-stretch, font-size-adjust)
• 文本系列属性(text-indent, text-align, line-height, word-spacing, letter-spacing, text-transform, direction, color)
• 元素可见性
  • visibility
  • 表格布局属性（caption-side, border-collapse, border-spacing, empty-cells, table-layout）
  • 列表属性(list-style-type, list-style-image, list-style-position, list-style)
  • 生成内容属性(quotes)
  • 光标属性(cursor)
  • 页面样式属性(page, page-break-inside, windows, orphans)
  • 声音样式属性(speak, speak-punctuation, speak-numeral, speak-header, speech-rate, volume, voice-family, pitch, pitch-range, stress, richness, azimuth, elevation)
  • opacity

无继承属性：

• display
• 文本属性：vertical-align, text-decoration, text-shadow, white-space, unicode-bidi
• 盒子模型的属性：宽度、高度、内外边距、边框等
• 背景属性：背景图片、颜色、位置等
• 定位属性：浮动、清除浮动、定位 position 等
• 生成内容属性：content、counter-reset、counter-increment
• 轮廓样式属性：outline-style、outline-width、outline-color、outline
• 页面样式属性：size、page-break-before、page-break-after

继承中比较特殊的两点

• a 标签的字体颜色不能被继承
• h1-h6 标签字体的大也是不能被继承的

因为它们都有一个默认值

4、控制继承

CSS 为控制继承提供了四个特殊的通用属性值。每个 css 属性都接收这些值。

• inheri 设置该属性会使子元素属性和父元素相同。实际上，就是 "开启继承".
• initial 设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit 。
• unset 将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial 一样
• revert 从级联中删除所有已被覆盖的样式，直到达到回滚到的样式(IE 不支持)

参考

https://www.cnblogs.com/hoyong/articles/10690119.html

https://www.cnblogs.com/leiting/p/10436477.html

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance