《精通 CSS - 高级 Web 标准解决方案（第 3 版）》
1. 渐进增强与向后兼容
在 HTML，当新定义的input类型，如email/number，如果浏览器不支持，会使用默认的text类型进行展示。
在 CSS 中，针对不能识别的特性，CSS 会直接忽略，而不会报错，所以只要在使用新特性同时，提供后备属性（新属性在后，后备属性在前），则不会有任何不良效果。
厂商前缀
不同厂商会引入针对自己浏览器适用的实验性特性。这些特性通常在规范中并没有或者尚不成熟，不同的浏览器会给这类特性在前面加一个特殊的前缀。
如-webkit-开头的适用于基于 WebKit 的浏览器，如 Safari/Chrome/Opera；-moz-适用于 Mozilla 的浏览器，如 Firefox；-ms-适用于微软的 IE。（通用的插件可以协助我们完成前缀的自动添加，如 autoprefix）
条件规则
如果希望根据浏览器对于某 CSS 特性的支持情况来提供不同的样式，则可以选择@supports块。这个特殊的代码块称为条件规则，它会检测括号中的声明，且仅在浏览器支持该声明的情况下，才会应用该声明。
如下：
@support (display: grid) {
/* 在支持网格布局的浏览器中应用的规则 */
}
忧伤的是，条件规则最大的问题就是它本身也是非常新的特性，支持度并不高。
2. 语义化标签
有语义的标签可以确保更多的人能够使用，不管是最新的 Chrome，还是 Lynx 这样只能处理文本的浏览器，甚至是屏幕阅读器或盲文点触设备。另外，有语义的标签页更容易被机器识别，如搜索引擎爬虫，可以提高页面搜索的准确性和排名。
笼统的来说，除了div/span这两个无明确语义的元素以及b/i这类被保留下来的表现性标记，其他的元素都可以称为语义化标签。
只要元素有明确的语义就叫做语义化标签，如常见的p是段落的意思，ul/ol表示无序列表和有序列表。
关于各标签元素的具体用法，可以参考http://html5doctor.com/[7]进行详细学习。
3. CSS Selector
| Selector Type | Description |
|---|---|
| 独立选择器 | 独立的选择器 |
| 组合选择器 | 独立选择器的各种组合 |
| 独立选择器 | 语法 | 含义 |
|---|---|---|
| tag/element selector | tag/element | 匹配指定元素名的元素 |
| class selector | .className | 匹配包含class的元素 |
| id selector | #id | 匹配包含id的元素(id应该是唯一的) |
| attribute selector | [attribute ] | 匹配包含attribute 的元素 |
| * selector | * |
.xxx-section > * 表示.xxx-section下面的所有直接子元素 |
| 伪元素选择器 | ::pseudo-element | |
| 伪类选择器 | :pseudo-class |
- 通用选择器可以用来清除所有元素的默认内外边距，如 * {padding: 0; margin: 0;}。
- 实现伪类的效果可以通过添加类来实现，但是想要实现伪元素的等价效果只能创建实际的 DOM 节点
| 组合选择器 | 语法 | 含义 |
|---|---|---|
| 分组选择器 | s1, s2, s3 | 同时给多个选择器同时应用样式 |
| 后代选择器 | s1 s2 | 选择某个元素或者某组元素的后代 |
| 子选择器 | s1 > s2 | s1 选择器的直接后代的 s2 |
| 相邻选择器 | s1 + s2 | 紧跟 s1 之后的 s2，s1 和 s2 为兄弟节点 |
| 一般同层选择器 | s1 ~ s2 | s1 之后非紧跟（包含紧跟的）的兄弟节点 s2 |
属性选择器
伪元素
Example: ::before, ::after, ::placeholder
A pseudo-element is used to style specified parts of an element. For example, it can be used to:
Style the first letter, or line, of an element
Insert content before, or after, the content of an element
::first-line, ::first-letter
::before can be used to insert some content before the content of an element
::after can be used to insert some content after the content of an element
::selection match the portion of an element that is selected by a user
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.(refer: 前端面试题-伪类和伪元素)
伪类
Example:
a链接元素 :link, :visited, :hover, :focus, :active
结构化 :nth-child(N), :nth-last-child(N), :first-child, :last-child
A pseudo-class is used to define a special state of an element.For example, it can be used to:
Style an element when a user mouses over it(a:hover)
Style visited and unvisited links differently (a:visited, a:link)
Style an element when it gets focus
4. CSS 层叠关系
很多css样式同时作用于某个元素时，会产生层叠，此时如何决定元素的最终生效样式？这就用到了权重。
通常情况下，浏览器层叠各个来源样式的顺序为：
1.浏览器默认样式表
2.用户样式表
3.作者链接样式表（按照它们链接到页面的先后顺序）
4.作者嵌入样式
5.作者行内样式
浏览器会按照上述顺序依次检查每个来源的样式，并在有定义的情况下，更新对每个标签属性值的设定。整个检查更新过程结束后，再将每个标签以最终设定的样式显示出来。
权重公式 - 'style属性-I-C-E'
style属性是指行内样式，比如：<p style="color: #ffffff"></p>,
I 表示id选择器，
C 表示类选择器，伪类选择器和属性选择器，
E 表示tag/element选择器
refer： Specifics on CSS Specificity
5. !important不可滥用
如果某个声明后面加上!important则表明此样式具有最高权重。
前端的初学者在开发过程中大多都会滥用!improtant来implement快速地应用expected的style。但是长此以往只会使我们的css code看起来像是一坨屎。也非常不利于后期的维护和修改。
正确的做法是：从一开始就简化选择器、降低特殊性,尽量不要使用!important。
I once heard it said that !important is like the Jedi mind trick for CSS. Indeed it is, and you can force your will over the styling of elements by using it. But!important imposes that will through drastically increasing the specificity of that particular selectors property.
The !important declaration can be easily misused if misunderstood. It is best used to keep your CSS cleaner, in examples where you know elements with a particular class selector should use a certain set of styling no matter what. Conversely, not used just as a quick crutch to override the styling of something instead of figuring out how the CSS was structured and working by the original author.
In fact, the order of selectors in your CSS does play a role and the "further down" one does in fact win when the specificity values are exactly the same.
