CSS选择器区别

"竞争永远只有一个冠军，但我们依然可以选择做自己的盖世英雄。赶快披上漂亮的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（必须）