复习CSS

层叠

CSS是由Cascading Style Sheets三个词的首字母缩写，翻译为层叠样式表，其中最重要的概念就是层叠。

CSS层叠是一种算法，浏览器通过它来决定将哪些CSS样式规则应用到一个元素上

当多个相互冲突的CSS声明应用于同一个元素时，CSS层叠算法会根据一定的机制，从最高权重到最低权重的顺序列出：

  • 来源（行内>内联>链接）和重要性(!important)
  • 选择器权重
  • 出现的顺序
  • 初始和继承属性（默认值）

优先级

  • 优先级就是分配给指定的 CSS 声明的一个权重，浏览器器会将最高优先级的样式应用到元素上。

  • 当多个 CSS 声明的优先级相等时（均为最高），其中最后的那个声明将会被应用到元素上。

  • important>内联 >ID>类 >标签 |伪类|属性选择 >伪对象 >继承 >通配符

ID 选择器：如 #id{}
类选择器：如 .class{}
属性选择器：如 a[href="baidu.com"]{}
伪类选择器：如 :hover{}
标签选择器：如 span{}
伪元素选择器：如 ::before{}
通配符选择器：如 *{}

关于优先级的判定：有一套计算规则参考深入理解CSS选择器优先级

继承

HTML是层级结构的， 一些设置在父元素上的css属性是可以被子元素继承的，有些则不能。

可继承的属性

种类 属性
字体属性 font、font-family、font-weight、font-size、font-style
文本属性 text-indent、text-align、text-shadow、line-height、color、
direction、word-spacing、letter-spacing、text-transform
元素可见属性 visibility
表格布局属性 caption-side、border-collapse、border-spacing、empty-cells、table-layout
列表布局属性 list-style-type、list-style-image、list-style-position、list-style
生成内容属性 quotes
光标属性 cursor

不可继承的属性

种类 属性
布局属性 display
文本属性 vertical-align、text-decoration、text-shadow、white-space
盒模型的属性 width、height、margin 、border、padding
背景属性 background、background-color、background-image
定位属性 float、clear、position、top、right、bottom、left、min-width、
min-height、max-width、max-height、overflow、clip、z-index

所有元素可以继承的属性

元素可见性：visibility

光标属性：cursor

内联元素可以继承的属性

字体系列属性

除text-indent、text-align之外的文本系列属性

块级元素可以继承的属性

text-indent、text-align