"竞争永远只有一个冠军，但我们依然可以选择做自己的盖世英雄。赶快披上漂亮的CSS外衣，好好表现自己一番吧。"
——有心人做有心事哦，晚安EmilyChen！
（一）单一
| 【1】属性选择器 |
|
|
| p[alt] |
选择具有att属性的 |
p元素 |
| p[alt="val"] |
选择att属性值 |
等于val的p |
| p[alt^="val"] |
匹配att属性值 |
以val开头的p |
| p[alt$="val"] |
匹配att属性值 |
以val结尾的p |
| p[alt*="val"] |
匹配att属性值 |
含有val的p |
【2】id选择器
<h1 id="goods">建下锚点
<a href="#goods">接上连结
（二）复合
| 【3】伪类 |
|
|
| 常见伪类（DOM已有元素，单冒号） |
:hover |
鼠标经过 |
|
:focus |
焦点 |
| 结构伪类（DOM已有元素，单冒号） |
p：first-child |
匹配父元素中的第一个子元素p |
|
p：last-child |
父元素中的最后一个p |
|
p：nth-child（n） |
父元素中的第n个p |
|
公式 |
n是数字、关键字，从0算起 |
|
2n |
偶数even |
|
2n+1 |
奇数odd |
|
5n |
5 10 15 |
|
n+5 |
从第5个开始（包含第5个） |
|
-n+5 |
选择前5个 |
|
p：first-of-type |
指定类型E的第一个 |
|
p：last-of-type |
指定类型E的最后一个 |
|
p：nth-of-type（n） |
指定类型E的第n个 |
| 伪元素（创建DOM元素，但属于行内元素（用于盒子里的小图标），双冒号） |
p::before |
p元素内容的前面,加content（必须） |
|
p::after |
p元素内容的后面,加content（必须） |
|
