CSS入门指南：工作原理

想做一个小程序，前端是必修课，那就从css开始吧。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

css 工作原理

每个html元素都有一组样式属性，可以通过css来设定。当html元素的同一个样式属性有多种样式值的时候，css就要靠层叠机智来决定最终应用哪种样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

HUGOMORE42文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

css规则

规则实际上是一条完整的css指令，规则声明了要修改的元素和要应用给改元素的样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

为文档添加样式的三种方法：

1. 写在元素标签里（也叫行内样式，只能影响它所在的标签，会覆盖嵌入样式和链接样式）
2. 写在 <style> 标签里（也就嵌入样式，应用范围仅限于当前页面，页面样式会覆盖外部样式表中的样式，但会被行内样式覆盖）
3. 写在单独css样式表中（也叫链接样式，样式表是一个扩展名为.css 的文件，可以在任意多个HTML页面链接同一个样式表文件。链接样式的作用范围是整个网站）

除了这三种为页面添加样式的方法，还有一种在样式表中链接其他样式表的方法，使用@import 指令：例如文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

@import url(css/styles.css)

@import 指令必须出现在样式表中其他样式之前，否则@吹灭；@import引用的样式表不会被加载。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

对这个基本的结构有三种方法可以进行扩展文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

第一种方法：多个声明包含在一条规则里。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

p {color: red; font-size: 12px; font-weight: bold;}

第二种方法：多个选择器组合在一起。例如：如果想让<h1>、<h2>和 <h3>的文本都变成蓝色粗体可以这么写：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

h1 {color: blue; font-weight: bold;}
h2 {color: blue; font-weight: bold;}
h3 {color: blue; font-weight: bold;}

也可以这么写：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

h1, h2, h3 {color: blue; font-weight: bold;}

分组选择符以逗号作为分隔符文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

第三种方法： 多条规则应用给一个选择符。
例如，写完上边的规则，还想把h3变成斜体，那么可以再为h3单独写一条规则：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

h1, h2, h3 {color: blue; font-weight: bold;}
h3 {font-style: italic;}

选择特定元素的选择符

用于选择特定元素的操作符有三种文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

1. 上下文选择符。基于祖先或者同胞元素选择一个元素。
2. ID和类选择符。基于id和class属性的值选择元素。
3. 属性选择符。基于属性的有无和特征选择元素。

上下文选择符

比如我们想给article中的段落设置不同的字号，可以使用上下文选择符来解决。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

上下文选择符的格式如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

标签1 标签2 {声明}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

其中标签2 是我们要选择的目标，而且只有在 标签1是其祖先元素的情况下才会被选中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

上下文选择符，叫后代组合式选择符，就是一组以空格分隔的标签名。用于选择作为特定祖先元素后代的标签。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

article p {font-weight: bold;}

上边例子中，只有article后代的p元素才会应用后边的样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

上下文选择符以空格作为分隔符文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

特殊的上下文选择符

• 子选择符 >

格式如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

标签1 > 标签2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

标签1 必须是 标签2 的父元素，不能是其它的祖先元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

section > h2 {font-style: italic;}

• 紧邻同胞选择符+

格式如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

标签1 + 标签2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

标签2 必须紧跟在期同胞标签1后面。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

h2 + p {font-variant: small-caps;}

标签 h2 和 p 为同一级标签，且标签p和 h2 相邻。(只应用到p标签）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

• 一般同胞选择符 ~

格式如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

标签1 ~ 标签2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

标签2 必须跟在其 同胞标签1 后面（可以不相邻）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

h2 ~ a {color: red;}

标签a 和 标签h2 同一级，且a标签在h2 标签之后。（只应用与a标签）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

• 通用选择符 *

通用选择符 * 是一个通配符，它匹配任何元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

* {color: green;}

这条规则会将所有元素（文本和边框）都变成绿色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

p * {color: red;}

这条规则会把p包含的所有元素的文本都变成红色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

section * a {font-size: 1.3em;}

所有section标签的 非子标签（*是所有的子标签）的a标签字体设置为 1.3 em;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

ID和类选择符

使用ID和类选择符，首先要在HTML标记中为元素添加id和class属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

可以给id和class属性设定任意值，但不能以数字或特殊符号开头文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

类属性

给标签h1添加 specialtext 类。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

<h1 class="specialtext">This is text</h1>

• 类选择符

格式为：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

.类名文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

类选择符使用点(.)，紧跟类名。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

• 标签带类选择符

格式为：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

标签1.类名文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

比如：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

p.specialtext {color: red;}

只对有 specialtext 类的p标签有效。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

• 多类选择符

可以给元素添加多个类：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

<p class="specialtext featured">Here the span tag <span> may or may not</span> be styled.</p>

多个类名放在同一对引号吃，用空格分隔。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

要选择同时存在这两个类名的元素可以这样写：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

.specialtext.featured {font-size: 120%;}

CSS 选择符的两个类名直接没有空格。如果加了，就变成祖先/后代关系的上下文选择符了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

ID属性

ID属性与类写法类似，用#表示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

<p id="specialtext">This is text</p>

上边p标签就设置了ID属性specialtext。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

相应的ID选择符就这样写：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

#specialtext {css样式}

选择元素方式其余和class 一致。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

ID属性和类属性的区别

• ID可以用于页面导航链接中。
  例如：

<a href="#bio">Biggraphy</a>

用户点击这个链接会滚到ID值为bio的位置。如果href属性里只有一个#，那么点击链接会跳到顶部。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

• ID值需要时独一无二的。
• 类的目的是为了标识一组具有相同特征的元素，以便我们为这些元素应用相同的css样式。

属性选择符

属性名选择符

格式如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

标签名[属性名]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

选择任何带有属性名的标签名。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

比如：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

img[title] {border: 2px solid blue;}

这个规则会选择带有title属性的HTML img元素，title是什么值都可以。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

属性值选择符

格式如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

标签名[属性名="属性值"]（在html5中，属性值得引号可不加)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

例如：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

img[title="red flower"] {border: 2px solid blue;}

这个规则会选择带有title属性的HTML img元素，且title值为"red flower"。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

伪类

伪类分两种：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

1. UI伪类会在HTML元素处于某个状态时，为该元素应用CSS样式。
2. 结构化伪类会在标记中存在某种结构上的关系时，为相应元素应用CSS样式。

伪类使用:(冒号)作为选择符。
两个冒号(::)表示新增的伪元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

UI伪类

UI伪类会基于特定的HTML元素的状态应用样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

链接伪类

针对链接的伪类有4个：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

• Link。 此时，链接为被点击
• Visited。用户点击过链接之后
• Hover。鼠标悬停在链接上
• Active。链接正在被点击

使用方式举例：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

a:link {color: black;}
a:visited {color: blue;}
a:hover {text-decoration: none;}
a:active {color: red;}

hover伪类可以应用在任何元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

p:hover {background-color: gray;}

:focus 伪类

可以应用于任何元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

点击时会或得焦点。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

:target 伪类

可以应用于任何元素。
如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标，可以用:target 选中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

比如：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

<a href="#more_info">More Infomation</a>

应用上伪类后，ID为more_info的元素就是目标。点击a标签时，会应用css样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

css规则如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

#more_info:target {background: #eee;}

结构化伪类

:first-child和:last-child

• :first-child 代表一组同胞元素的第一个元素
• :last-child 代表一组同胞元素的最后一个元素

:nth-child

规则如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

e:nth-child(n)

e表示元素名，n表示一个数值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

比如：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

li:nth-child(3)

会选中一组列表的每个第三项。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

伪元素

伪元素是文档中若有实无的元素。
常用的伪类如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

::first-letter

选择首字母，使用规则：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

e::first-letter

比如文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

p::first-letter {font-size:300%;}

会让首字母变大。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

::first-line

选择段落的第一行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

e::first-line

::before和::after

使用规则如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

e::before
e::after

可用于在特定的元素前面或者后面添加特殊内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

以上CSS选择符已经介绍完了，接下来讨论在一个大的样式表中，规则选择的问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

CSS提供了三种机制来决定那条规则会胜出：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

• 继承
• 层叠
• 特指

继承

CSS属性的值会向下传递。
比如我们添加一条这样的规则：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

body: {font-family: arial;}

那么文档的所有元素都将继承这个样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

层叠

层叠，是样式在文档层次中逐层叠加的过程，目的是让浏览器面对某个标签特定属性值得多个来源，确定最终使用哪个值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

样式来源

以下是浏览器层叠各个来源样式的顺序：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

1. 浏览器默认的样式表
2. 用户的样式表
3. 作者链接样式表（按照它们链接到页面的先后顺序）
4. 作者嵌入样式
5. 作者行内样式

浏览器会按上述顺序依次检查每个来源的样式，并在有定义的情况下，更新对每个标签属性值得设定。整个检查更新过程结束后，再将每个标签已最终设定的样式显示出来。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

比如，如果作者链接样式表将p的字体设定为Helvetica，而页面中有一条嵌入规则以相同的选择符吧字体设定为Verdana，那么段落文本最终会以Verdana字体显示。因为浏览器是在读取链接样式表之后读取嵌入样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

层叠规则

层叠规则一：找到应用给每个元素和属性的所有声明。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

层叠规则二：按照顺序和权重排序。浏览器一次检查5个来源，并设定匹配的属性，如果匹配的属性在下一个来源有定义，则更新改属性值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

声明也可以加权重。比如：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

p {color: green !important; font-size: 12pt;}

空格!important分号(;) 用于加重声明的权重。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

这条规则加重了将文本设置为绿色的权重。所以就算层叠的下一来源给段落设定了其他颜色，最终的颜色仍然还是绿色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

层叠规则三：按特指度排序。特指度是表示一条规则有多明确。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

比如某个样式表中包含如下规则：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

p {font-size: 12px;}
p.largetext {font-size: 16px;}

<p class="largetext">A bit of text</p>

那么上边的p标签将显示16px 文本，因为第二条规则的选择符既包含标签名，又包含类名（特指度高）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

如果是下边的样式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

p {font-size: 12px;}
.largetext {font-size: 16px;}

<p class="largetext">A bit of text</p>

还是会显示16px像素，因为类的特指度高。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

层叠规则四 顺序决定权重。如果两条规则都影响某一元素的属性，特指度也相同，后出现的胜出。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

计算特指度

计算特指度有一个记分规则，被称为“ICE”公式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

I-C-E文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

I(ID)C(Class)E(Element)并非真正的三个数，但是 0-1-12比0-2-0 小。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

ICE记分规则如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

1. 选择符中有一个ID，在I的位置上加1；
2. 选择符中有一个类，在C的位置上加1；
3. 选择符中有一个元素，在E的位置上加1；
4. 得到一个三位数。

好了，我们来看一个例子：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html

简化版层叠规则

1. 包含ID的选择符胜过包含类的选择符，包含类的胜过包含标签的选择符。
2. 如果几个不同来源都为同一个标签的同一个属性定义了样式，行内样式胜过嵌入样式，嵌入样式胜过链接样式。在链接样式表中，具有相同特指度的样式，后声明的优先。
3. 规则一胜过规则二。
4. 设定的样式胜过继承的样式。

这一篇我们主要介绍了CSS规则，以及如何用它来为HTML应用样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/925.html