CSS是Cascading Style Sheet的简称，用来负责对页面的内容进行样式渲染。是前端开发领域中第二重要的DSL，本文对CSS的以下知识要点进行总结：
- 规则集
- CSS中的单位
- CSS中的颜色
一. 规则集
CSS是以规则集的形式被书写出来的。每个规则由两部分组成，一个是选择器（selector），一个是声明块（delcaration block）。一个常见的CSS规则如下所示：
div {
text-align: right;
}
这里的选择器为div，意味着匹配所有的div标签。声明块为{ text-align: right; }。声明块可以有多条语句构成，每行一个，以分号隔开。CSS中有复杂的选择器机制，下面我们来一一介绍。
1.1 ID选择器
ID选择器以#号开头，匹配的是HTML元素中对应ID的元素，例如我们有这样的ID选择器：
#happy-cake {
}
那么：
Wrong ID!
That's not an ID!
1.2 类选择器
类选择器则以句点.开头，匹配的是HTML元素中对应class的元素，它可以匹配多个相同class的HTML元素，比如以下的类选择器：
.module {
}
那么：
The dot is for CSS, not HTML
Wrong class
1.3 标签选择器
标签选择器用于匹配HTML的元素。比如我们要选择所有的h2标签：
h2 {
}
那么：
Hi, Mom
Anywhere
Wrong tag, can't trick it
Make sure that tag has a space after it!
1.4 属性选择器
属性选择器的基本用法是选择具有某个属性的元素。举例，如果我要匹配rel属性为external的h1元素，那么可以写：
h1[rel="external"] {
}
属性选择器还有很多高级用法。上面用到的=属于精确匹配，其他常用的还有：
- *=模糊匹配：
h1[rel*="external"] { color: red; }选择Attribute Contains
- ^=开头匹配：
h1[rel^="external"] { color: red; }选择Attribute Begins
- ="external"] { color: red; }
选择Attribute Ends
` - ~=匹配空格分隔的多个属性：
h1[rel~="external"] { color: red; }选择Attribute Space Separated
- |=匹配破折号-分隔的多个属性的第一个：
h1[rel|="friend"] { color: red; }选择Attribute Dash Separated
- 多重属性选择：
h1[rel="handsome"][title^="Important"] { color: red; }选择Multiple Attributes
1.5 伪类选择器
伪类选择器用于指定元素的状态，以冒号:开头，比如:hover表示当鼠标悬停时在元素上应用样式。又比如:nth-child这样的位置选择器可以用复杂的语法进行子节点选择，一些常用的例子可以实现复杂的选择。
1.6 关系选择器
CSS中还有一类选择器叫做关系选择器，它用来根据元素与元素之间的关系来选择元素并渲染样式。常见的有：
- E: first-child表示任一是其父母节点的第一个子节点的元素E
- B + E表示元素B的任一下一个兄弟元素E
- B ~ E表示B元素后面的拥有共同父元素的兄弟元素E
- A > E表示元素A的任一子元素E(也就是直系后代)
- A E表示元素A的任一后代元素E (后代节点指A的子节点，子节点的子节点，以此类推)
1.7 任意组合
熟悉了上面的几种要点，在实际开发中我们就可以任意组合来编写各种复杂的规则集，举例：
.module.news {
/* Selects elements with BOTH of those classes */
}
#site-footer::after {
/* Adds content after an element with that ID */
}
section[data-open] {
/* Selects only section elements if they have this attribute */
}
.module > h2 {
/* Select h2 elements that are direct children of an element with that class */
}
h2 + p {
/* Select p elements that are directly following an h2 element */
}
li ~ li {
/* Select li elements that are siblings (and following) another li element. */
}
以上就是规则集的工作原理，选择器的详细说明，可以参考官方文档。
1.8 CSS特异值
CSS选择器有基于特异值的优先级规则，一般来说，特异值相同的选择器，处在下方的会覆盖上方的规则。对于特异值不同的选择器，高特异值的选择器会优先于低特异值的选择器被使用。特异值的计算方法如下图所示：
元素的样式属性特异值最高，然后是ID，再然后是类和伪类以及属性选择器，最后是标签选择器，具体的计算方法可以参考这篇文章。
二. CSS中的长度单位
CSS中表示长度的单位分为两种。一种是相对长度，比如用于相对字体大小的有em，ex，ch，rem，lh和rlh。用于视口比例长度（视口是指文档可视部分）的有vh，vw，vi，vb，vmin和vmax，相对长度常用于响应式设计。绝对长度单位有px，mm，cm，in，pt和pc。
三. CSS中的颜色
CSS中表示颜色有三种方式：RGB，HEX和字符串。RGB是用0-255的数值来分别表示Red，Green和Blue三种颜色配比，例如rgb(255, 0, 255)。HEX则用#号开头的16进制数来表示，比如上面的颜色也可以表示成#FF00FF，HEX表示法可以简写。最后一种是字符串，比如blue，但这种方式无法表达一些不常见的颜色。在线颜色选择器对确认颜色很有帮助。
以上就是对CSS基本用法的一个总结，详细的CSS属性可以参考官方索引。