基础选择器
元素选择器 p { color: red; }
，ID选择器 #app { color: red; }
，类选择器 .app { color: red; }
通用选择器 * { margin: 0; padding: 0;}
关系选择器
后代：.block p { }
子元素：.block > p {}
后面的兄弟：p ~ div {}
紧跟其后的一个兄弟： p + div {}
伪类选择器
a:link{ color: red; } a元素未被访问前的状态
a:visited{ color: red; } a元素被访问后的状态
a:hover{ color: red; } 悬浮在该元素上的状态
a:active{ color: red; } 设置元素被鼠标激活的状态
结构性伪类
“:nth-child(n)”,n可以是数字（4）、关键词(odd，even)或公式（2n+1）
X:nth-last-child(n) :nth-child(n)，是从第一个开始算索引，而X:nth-last-child(n)是从最后一个开始算索引。
X:nth-of-type(n) nth-of-type与nth-child的效果是惊人的相似，
X:nth-last-of-type(n) :nth-last-child效果相似。
X:first-child 匹配子集的第一个元素。
X:last-child 与:first-child效果相反
X:only-child 这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
X:only-of-type 与:only-child类似。
X:first-of-type
:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。
属性选择器
| 选择器 | 描述 |
|---|---|
| [attribute] | 用于选取带有指定属性的元素 |
| [attribute=value] | 用于选取带有指定属性和值的元素 |
| [attribute\^=value] | 匹配属性值以指定值开头的每个元素 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素 |
| [attribute*=value] | 匹配属性值中包含指定值的每个元素 |
| [attribute~=value] | 用于选取属性值中包含指定词汇的元素 |
| [attribute|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词 |
/* 选中 title 属性链接 */
a[title] {}
/* 选中新窗口打开的链接 */
a[target="_blank"] {}
/* 选中 pdf */
a[href$=".pdf"] {}
/* 选中 png */
a[href$=".png"] {}
/* 选中绝对路径链接 */
a[href^="http://"],
a[href^="https://"] {}伪元素选择器(双冒号标识，与伪类区别)
::first-letter向文本的第一个字母添加特殊样式。
::first-line向文本的首行添加特殊样式。
::before在元素之前添加内容。
::after在元素之后添加内容。
选择器分组，简化CSS代码