这是我参与「第四届青训营」笔记创作活动的的第 1 天

什么是 CSS

CSS 是层叠样式表的缩写，用来定义页面中元素的样式，如：设置字体颜色、元素的位置、元素的动画效果等。

选择器语法

CSS 的语法基本遵循：

selector {
    property: value;
    ...
}

也就是 选择器 + 括号 ，括号中编写一条或者多条的样式声明，不同的声明之间用分号隔开。一条声明包含属性和值，使用冒号隔开。

本文不会涉及 CSS 具体属性的使用，如果要查看某个属性的具体用法，可以参考 mdn web docs。

在页面中使用 CSS

在页面中使用 CSS 有三种方式：

引入外部 CSS

<link rel="stylesheet" href="style.css">

即在 HTML 中使用 link 标签来表明引入一个外部的 CSS 文件。

嵌入式 CSS

<style>
    p {
        color: red;
    }
</style>

即在 HTML 中直接使用 style 标签，并在标签内部书写 CSS。

内联 CSS

即在要作用的元素之上直接编写 CSS 样式声明，不需要选择器，因为它只作用于你编写的这一个元素，所以当然也不需要选择了。

<p style="color: red;">Red Text</p>

使用哪种引入方式？

通常使用外部 CSS 更多一些，因为这样可以提高样式在不同页面的复用程度，对于一些公共样式，浏览器只需要加载一次。而对于个别特殊页面可以使用嵌入 CSS，对于个别特殊元素使用内联 CSS。

CSS 的几种选择器

通配选择器

使用 * 来作为选择器，这个选择器将会选择所有的标签。

标签选择器

选择器就是标签的名称，会选中所有对应名称的标签。

ID 选择器

选择器是 # + ID 的格式，会选中所有对应 ID 的标签。（当然 ID 表示的就是唯一的语义，最好不要在页面中定义两个相同的 ID）

类选择器

当我们有一类特殊标签需要选择的时候，可以为这个标签定义 class 而不是 ID，这样则使用类选择器来选中元素： . + 类名 。

属性选择器

使用 [属性名] 这样的格式来选中带有这个属性的所有标签。

如果要匹配具体的属性值，则使用 [属性名=值] 这样的形式。

属性选择器还可以匹配属性值以某个字符串开头或结尾的标签，使用 [属性名^=值] 来匹配以指定值开头的属性，使用 [属性名$=值] 来匹配以指定值结尾的属性。

伪类选择器

伪类选择器通常分为两种，一种是状态伪类，另一种是结构伪类。

状态伪类选择器

伪类选择器	意义
:link	链接的默认状态
:visited	访问过的链接状态
:active	链接被激活的状态
:hover	鼠标悬停的状态
:focus	处于焦点的状态

结构伪类选择器

伪类选择器	意义
:first-child	选中第一个子元素
:last-child	选中最后一个子元素
:nth-child(n)	选中第 n 个子元素

除了上面这些常用的伪类选择器以外，CSS 还提供了很多伪类，具体可以参考 mdn web docs 。

组合选择器

有时我们不能直接通过上面这些选择器来直接选择到一些元素，这时就可以用到组合选择器。

名称	语法	说明
直接组合	AB	满足A同时满足B
后代组合	A B	如果B是A的后代则选中B
亲子组合	A>B	如果B是A的子元素则选中B
兄弟选择器	A~B	如果B在A后并且与A同级则选中B
相邻选择器	A+B	如果B紧跟在A后面则选中B

选择器组

当我们有一些选择器需要使用共同的样式声明的时候，就可以用到选择器组：

selector1, selector2[, ...] { ... }

通过逗号的方式，将多个选择器分隔开来，这些选择器将共用后面大括号中声明的样式。

CSS 优先级

使用方式优先级

不同的 CSS 使用方式用不同的优先级，CSS 的优先级采用就近原则，即：内联CSS > 嵌入CSS > 外部CSS 。

选择器优先级

选择器的优先级其实是有具体的值的，如果要深入了解可以参考： mdn web docs 和 css specifishity。这里列出青训营中老师讲的方法，基本的判断使用这种方法会更简便。

要比较两个选择器的优先级（或称特异度，Specificity），依次别看选择器中的 id 个数、（伪）类个数和标签个数。

个数多的优先级则高，只有在前一种个数相同的情况下才需要比较后面情况的个数是否相同。

举例

举个栗子，#nav .list 和 .list ，前者有一个 id，后者没有 id，因此前者优先级高。而如果后者改为 #nav .list .link ，则后者优先级高，因为此时两者都有一个 id，于是比较（伪）类个数，后者有两个类，前者只有一个，于是后者的优先级更高。

最高优先级

除了上面这些以外，在 CSS 定义时添加了 !important 关键词的参数将会被赋予更高的优先级，有 !important 的定义一定比没有的优先级要高，甚至比内联 CSS 优先级还要高。

但是正因为 !ipmortant 这样的特性，并不建议在实践中滥用这个特性。

参考

字节跳动青训营 - 理解 CSS
mdn web docs
CSS SPECIFISHITY

CSS 选择器知识速览 | 青训营笔记