1、伪类选择器
伪类选择器总汇
伪类选择器分为四种类型：结构性伪类、UI 伪类、动态伪类和其他伪类选择器，具体如下：
结构性伪类选择器
结构性伪类选择器能够根据元素在文档中的位置选择元素。这类元素都有一个前缀（:）。
根元素选择器
:root {border: 1px solid red;}
解释：匹配文档中的根元素，基本不怎么用，因为总是返回<html>元素。
子元素选择器
ul > li:first-child {color: red;}
解释：选择第一个子元素。
ul > li:last-child {color: red;}
解释：选择最后一个子元素。
ul > li:only-child {color: red;}
解释：选择只有一个子元素的那个子元素。
div > p:only-of-type {color: red;}
解释：选择只有一个指定类型的子元素的那个子元素。
:nth-child(n) 系列
ul > li:nth-child(2) {color: red;}
解释：选择子元素的第二个元素。
ul > li:nth-last-child(2) {color: red;}
解释：选择子元素倒数第二个元素。
div > p:nth-of-type(2) {color: red;};
解释：选择特定子元素的第二个元素。
div > p:nth-last-of-type(2) {color: red;};
解释：选择特定子元素的倒数第二个元素。
UI 伪类选择器
UI 伪类选择器是根据元素的状态匹配元素。
:enabled
:enabled {border: 1px solid red;}
解释：选择启用状态的元素。
:disabled
:disabled {border: 1px solid red;}
解释：选择禁用状态的元素。
:checked
:checked {display: none;}
解释：选择勾选的 input 元素。
:default
:default {display: none;}
解释：从一组类似的元素中选择默认元素。比如 input 被勾选的即默认的。
:valid 和:invalid
input:valid {border: 1px solid blue;}input:invalid {border: 1px solid green;}
解释：输入验证合法与不合法显示时选择的元素。
:required 和:optional
input:required {border: 1px solid blue;}input:optional {border: 1px solid green;}
解释：根据是否具有 required 属性选择元素。
动态伪类选择器
动态伪类选择器根据条件的改变匹配元素。
:link 和 和 visited
a:link {color: red;}a:visited {color: orange;}
解释：:link 表示未访问过的超链接，:visited 表示已访问过的超链接。
:hover
a:hover {color: blue;}
解释：表示鼠标悬停在超链接上。
:active
a:active {color: green;}
解释：表示鼠标按下激活超链接时。
:focus
input:focus {border: 1px solid red;}
解释：表示获得焦点时。
其他伪类选择器
:not
a:not([href*="baidu"]) {color: red;}
解释：否定选择器，反选。
:empty
:empty {display: none;}
解释：匹配没有任何内容的元素。
:lang
:lang(en) {color: red;}
解释：选择包含 lang 属性，属性值前缀为 en 的元素。和属性选择器匹配结果一致。
:target
:target {color: red;}
解释：定位到锚点时，选择此元素。
::selection
::selection {color: red;}
解释：这是一个伪元素选择器，当选择文字时触发选择。CSS3 版本下的选择器。
2、CSS 颜色设置
颜色表方案
颜色的表现形式主要有三种方式：颜色名称、十六进制代码和十进制代码。
p {color: red;}
解释：这是将一个段落内的文字设置为红色，采用的是英文颜色名称。问题是，其他各种颜色我们将如何设置？
在古老的 HTML4 时，颜色名称只有 16 种。
当然，目前颜色名称远远不止这些，可以搜索更多的 HTML 颜色表或 CSS 颜色表查阅。这里提供一些页面如下 ：
/page/z1015m9220j18754.html
http://finle.me/colors.html
/tags/html_ref_colornames.asp
在上面的表格中，我们也罗列出对应的十六进制和十进制颜色表示方法。使用方法如下：
// 红色的十六进制方案p {color: #ff0000;}
十进制表示方法就比较多样化，有四种方案：
p {color: rgb(112, 128, 114);color: rgba(0, 128, 128, 0.5);color: hsl(120, 100%, 30%);color: hsla(120, 100%, 30%, 0.5);}
目前又有一个疑问，这些值从哪里获取。除了颜色表之外，想要微调自己的颜色值。我们可以使用 photoshop 等平面设计软件的调色板获取相应的值。
3、度量单位
在 CSS 长度设置中，我们经常需要使用到度量单位，即以什么样的单位设计我们的字体或边框长度。而在 CSS 中长度单位又分为绝对长度和相对长度。绝对长度指的是现实世界的度量单位，CSS 支持五种绝对长度单位。
绝对长度单位：
相对长度指的是依托其他类型的单位，也是五种。
相对长度单位：
一些常用的单位如下：
// em 相对单位p {margin: 0;padding: 0;background: silver;font-size: 15px;height: 2em;}
解释：em 是相对单位，与字号大小挂钩，会根据字体大小改变自己的大小，灵活性很高。
// px 相对单位，绝对特性p {margin: 0;padding: 0;background: silver;font-size: 15px;height: 55px;}
解释：虽然 px 也是相对单位，但由于和分辨率挂钩，导致他其实就变成一个绝对单位了，自然灵活性没有 em 高，但是使用难度较低，且大量的开发者习惯性使用它。
// % 百分比p {margin: 0;padding: 0;background: silver;font-size: 200%;width: 50%;}
解释：长度比较好理解，就是挂钩它所在区块的宽度。而 font-size 则是继承到的原始大小的百分比。
4、文本字体
字体设置总汇
字体设置
我们可以通过 CSS 文本样式来修改字体的大小、样式以及形态。
font-size
p {font-size: 50px;}
解释：设置文本的大小。属性值如下表：
// 先设置父元素字体大小body {font-size: 50px;}// 再设置相对小一些p {font-size: smaller;}
font-variant
p {font-variant: small-caps;}
解释：设置字体是否以小型大写字母显示。
// 先让父元素设置小型大写body {font-variant: small-caps;}// 让子元素设置恢复小写p {font-size: 50px;font-variant: normal;}
font-style
p {font-style: italic;}
解释：设置字体是否倾斜。
font-weight
p {font-weight: bold;}
解释：设置字体是否加粗。
在目前计算机和浏览器显示中，只有 bold 加粗，其他更粗更细，目前体现不出来。
font-family
p {font-family: 微软雅黑;}
解释：使用指定字体名称。这里使用的字体是浏览者系统的字体。有时为了兼容很多浏览者系统的字体，可以做几个后备字体。
// 备用字体p {font-family: 楷体,微软雅黑,宋体;}
font
p {font: 50px 楷体;}
解释：字体设置简写组合方式。格式如下：[是否倾斜|是否加粗|是否转小型大写] 字体大小 字体名称；
Web 字体
虽说可以通过备用字体来解决用户端字体缺失问题，但终究用户体验不好，且不一定备用字体所有用户都安装了。所以，现在 CSS 提供了 Web 字体，也就是服务器端字体。
// 服务器提供字体@font-face {font-family: abc;src: url('BrushScriptStd.otf');}p {font-size: 50px;font-family: abc;}
英文字体文件比较小，而中文则很大。所以，中文如果想用特殊字体可以使用图片。大面积使用特殊中文字体，就不太建议了。
5、文本样式
文本设置总汇
文本样式
CSS 文本样式有三种：文本装饰、英文大小写转换和文本阴影。
text-decoration
p {text-decoration: underline;}
解释：设置文本出现下划线。属性值如下表：
// 让本来有下划线的超链接取消a {text-decoration: none;}
text-transform
p {text-transform: uppercase;}
解释：设置英文文本转换为大小写。
text-shadow
p {text-shadow : 5px 5px 3px black;}
解释：给文本添加阴影。其中四个值，第一个值：水平偏移；第二个值：垂直偏移；第三个值：阴影模糊度（可选）；第四个值：阴影颜色（可选）。
文本控制
CSS 文本样式中还有一组对文本进行访问、形态进行控制的样式。
text-align
p {text-align: center;}
解释：指定文本的对齐方式。
start 和 end 属于 CSS3 新增的功能，但目前 IE 和 Opera 尚未支持。
white-space
p {white-space: nowrap;}
解释：处理空白排版方式。
letter-spacing
p {letter-spacing: 4px;}
解释：设置文本之间的间距。
word-spacing
p {word-spacing: 14px;}
解释：设置英文单词之间的间距。
line-height
p {line-height: 200%;}
解释：设置段落行高。
word-wrap
p {word-wrap: break-word;}
解释：让过长的英文单词断开。
text-indent
p {text-indent: 20px;}
解释：设置文本首行的缩进。
