CSS学习记录

https://developer.mozilla.org/zh-CN/docs/Web/CSS
层叠样式表 Cascading Style Sheets
描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档在屏幕、纸质、音频等其它媒体上的呈现
由 W3C 规范 实现跨浏览器的标准化，CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。
继承、优先级、顺序

概念

继承

继承属性

非继承：widths , margins, padding, borders
哪些属性属于默认继承很大程度上是由常识决定的

继承相关

控制继承

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

inherit 开启继承
initial 设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit 。
unset 将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样
revert 少数浏览器支持

CSS 的 shorthand 属性 all
值可以是其中任意一个(inherit, initial, unset, or revert)。这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点。很神奇
实验：重设所有属性值

css层叠

重要性的降序记录：
来源
!important 用来覆盖所有优先级计算
优先级
资源顺序

？多个类选择器应用于一个元素，这个顺序是指元素的class属性中的顺序，还是css文件内的顺序

来源

来源：对于web开发人员的样式表来说，覆盖用户样式表是有意义的，但是用户可以通过important覆盖
用户样式表中的!important 声明
web开发人员设置的样式表中的!important声明
web开发人员设置的样式表中的常规声明
用户样式表中的常规声明(由用户设置的自定义样式)。
用户代理样式表中的声明(例如，浏览器的默认样式，在没有设置其他样式时使用)。

优先级

!important 用来覆盖所有优先级计算
优先级

千位： 内联样式
百位： ID选择器
十位： 类选择器、属性选择器或者伪类
个位： 元素、伪元素选择器

• 通用选择器 (*)，组合符 (+, >, ~, ’ ')，和否定伪类 (:not) 不会影响优先级
• 在进行计算时不允许进行进位，例如，20 个类选择器仅仅意味着 20 个十位，而不能视为 两个百位，也就是说，无论多少个类选择器的权重叠加，都不会超过一个 ID 选择器。
  

选择器

伪类与伪元素

伪类是选择器的一种，选择处于特定状态的元素

li:last-child { // 是最后一个孩子的li元素
  background-color: lime;
}
:first-child
:nth-child
:only-child

em:last-of-type 子元素列表中，最后一个em元素
input:invalid 表示任意内容未通过验证的 <input> 或其他 <form> 元素 

:hover——上面提到过，只会在用户将指针挪到元素上的时候才会激活，一般就是链接元素。
:focus——只会在用户使用键盘控制，选定元素的时候激活。

伪元素 开头为双冒号::，往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。

::first-letter	匹配元素的第一个字母
::first-line	匹配包含此伪元素的元素的第一行

::before、::after 常结合content属性一起使用，插入文档内容

.box::before {
    content: "This should show before the other content."
} 

.box::after {
    content: " ➥"
}   

插入一个图标，例如下面的示例加入的一个小箭头，作为一个视觉性的提示，而且我们并不希望屏幕阅读器读出它。

注意：使用content 属性插入的内容都是匿名的可替换元素。
content

开发中：
::grammar-error 匹配文档中包含了浏览器标记的语法错误的那部分。
::selection 匹配文档中被选择的那部分（比如使用鼠标或其他选择设备选中的部分）
::spelling-error 匹配文档中包含了浏览器标记的拼写错误的那部分。

结合

article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}