CSS 基础
继承控制
CSS 为控制继承提供了三个特殊的通用属性值。每个 css 属性都接收这些值。
inherit:设置该属性会使子元素属性和父元素相同。实际上，就是 "开启继承".initial:设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit 。unset:将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样
重设所有属性值
CSS 的 shorthand 属性all可以用于同时将这些继承值中的一个应用于（几乎）所有属性。它的值可以是其中任意一个 (inherit, initial or unset)。
层叠
通用选择器 (*)，组合符 (+, >, ~, ' ')，和否定伪类 (:not) 不会影响优先级。
影响层叠的三个重要因素
- 资源顺序
- 优先级
- 重要程度
资源顺序
如果有超过一条规则，而且都是相同的权重，那么最后面的规则会应用。可以理解为后面的规则覆盖前面的规则，直到最后一个开始设置样式。
优先级
本质上，不同类型的选择器有不同的分数值，把这些分数相加就得到特定选择器的权重，然后就可以进行匹配。
一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：
- 千位:如果声明在
style的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是 1000。 - 百位:选择器中包含
ID选择器则该位得一分。 - 十位:选择器中包含
类选择器、属性选择器或者伪类则该位得一分。 - 个位:选择器中包含
元素、伪元素选择器则该位得一分。
例如:
| 选择器 | 千位 | 百位 | 十位 | 个位 | 优先级 |
|---|---|---|---|---|---|
h1 | 0 | 0 | 0 | 1 | 0001 |
h1 + p::first-letter | 0 | 0 | 0 | 3 | 0003 |
li > a[href*="en-US"] > .inline-warning | 0 | 0 | 2 | 2 | 0022 |
#identifier | 0 | 1 | 0 | 0 | 0100 |
| 内联样式 | 1 | 0 | 0 | 0 | 1000 |
重要程度
!important:有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算，不过需要很小心的使用 — !important。用于修改特定属性的值， 能够覆盖普通规则的层叠。
CSS选择器
类型选择器
类型选择器有时也叫做“标签名选择器”或者是”元素选择器“
全局选择器
全局选择器，是由一个星号（*）代指的，它选中了文档中的所有内容（或者是父元素中的所有内容，比如，它紧随在其他元素以及邻代运算符之后的时候）
类选择器
类选择器以一个句点（.）开头，会选择文档中应用了这个类的所有物件.
ID 选择器
ID 选择器开头为#而非句点，不过基本上和类选择器是同种用法.
可是在一篇文档中，一个 ID 只会用到一次。
属性选择器
HTML元素可以带有属性,提供了关于如何标记的更详细信息。
CSS 中，你能用属性选择器来选中带有特定属性的元素。 属性选择器包含以下几种:
| 选择器 | 示例 | 描述 |
|---|---|---|
[attr] | a[title] | 匹配带有一个名为attr的属性的元素 |
[attr=value] | a[href="cn.bing.com"] | 匹配带有一个名为attr的属性的元素，其值为value的元素 |
[attr~=value] | p[class~="special"] | 匹配带有一个名为attr的属性的元素，其值为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配。 |
[attr|=value] | div[lang|="zh"] | 匹配带有一个名为attr的属性的元素，其值可正为value，或者开始为value，后面紧随着一个连字符。 |
[attr^=value] | li[class^="box-"] | 匹配带有一个名为attr的属性的元素，其值开头为value子字符串。 |
[attr$=value] | li[class$="-box"] | 匹配带有一个名为attr的属性的元素，其值结尾为value子字符串 |
[attr*=value] | li[class*="box"] | 匹配带有一个名为attr的属性的元素，其值的字符串中的任何地方，至少出现了一次value子字符串。 |
[attr=value i] | li[class^="a" i] | 使属性选择器大小写不敏感 |
伪类元素
伪类是选择器的一种，它用于选择处于特定状态的元素.
伪类开头为冒号:.
| 伪类选择器 | 示例 | 描述 |
|---|---|---|
:active | a:active | 在用户激活（例如点击）元素的时候匹配 |
:hover | a:hover | 当用户悬浮到一个元素之上的时候匹配 |
:visited | a:visited | 匹配已访问链接 |
:link | a:link | 匹配未曾访问的链接 |
:checked | input:checked | 匹配处于选中状态的单选或者复选框 |
:enabled | input:enabled | 匹配处于开启状态的用户界面元素 |
:disabled | input:disabled | 匹配处于关闭状态的用户界面元素 |
:empty | p:empty | 匹配除了可能存在的空格外，没有子元素的元素。 |
:focus | input:focus | 当一个元素有焦点的时候匹配 |
:read-only | input:read-only | 匹配用户不可更改的元素 |
:read-write | input:read-write | 匹配用户可更改的元素 |
:not(selector) | :not(p) | 匹配作为值传入自身的选择器未匹配的物件 |
:first-child | p:first-child | 匹配兄弟元素中的第一个元素 |
:first-of-type | p:first-of-type | 匹配兄弟元素中第一个某种类型的元素 |
:last-child | p:last-child | 匹配兄弟元素中最末的那个元素 |
:last-of-type | p:last-of-type | 匹配兄弟元素中最后一个某种类型的元素 |
:only-child | p:only-child | 匹配没有兄弟元素的元素 |
:only-of-type | p:only-of-type | 匹配兄弟元素中某类型仅有的元素 |
:nth-child(n) | p:nth-child(2) | 匹配一列兄弟元素中的元素——兄弟元素按照an+b形式的式子进行匹配(n从0开始) |
:nth-of-type(n) | p:nth-of-type(2) | 匹配某种类型的一列兄弟元素——兄弟元素按照an+b形式的式子进行匹配 |
:nth-last-child(n) | p:nth-last-child(2) | 匹配一列兄弟元素，从后往前倒数。兄弟元素按照an+b形式的式子进行匹配 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 匹配某种类型的一列兄弟元素，从后往前数。兄弟元素按照an+b形式的式子进行匹配 |
伪元素选择器
伪元素以类似元素的方式表现，不过表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类.
伪元素是一个附加在选择器末尾的关键词，通过伪元素您不需要借助元素的 ID 或 class 属性就可以对被选择元素的特定部分定义样式
伪元素开头为双冒号::。
常用的伪元素:
| 伪元素 | 示例 | 描述 |
|---|---|---|
::before | p::before | 匹配出现在原有元素的实际内容之前的一个可样式化元素 |
::after | p::after | 匹配出现在原有元素的实际内容之后的一个可样式化元素 |
::first-letter | p::first-letter | 匹配元素的第一个字母。 |
::first-line | p::first-line | 匹配包含此伪元素的元素的第一行。 |
::selection | p::selection | 匹配文档中被选择的那部分。 |
关系选择器
| 关系选择器 | 示例 | 描述 |
|---|---|---|
空格 | p span | 后代选择器 |
> | p > span | 子代关系选择器 |
+ | p + img | 相邻兄弟选择器 |
~ | p ~ img | 通用兄弟选择 |
内容整理于MDN
