前端学习（二）----CSS选择器

学习目标：

了解并掌握css选择器的运用

---

css选择器

想要进行练习可以搜索css diner进行练习

---

学习时间：

1h

---

学习产出：

选择器	解释
ul.fancy *	<ul class="fancy">里所有元素
p + .intro	每个直接跟在p标签后的class=intro元素
A~B	所有跟在A后面的B元素（直接跟在B前面不能有其他元素）
A B	A中所有的B元素 可以套嵌好多层
A>B	父类为A的B元素
div p:first-child	div中第一个p标签
div p:nth-child(n)	div中第n个p标签 其中n可以为2n（偶数个），3n...
A>:only-child	A标签中只有一个元素
:last-child	选择所有有父子关系的最后的元素
span:last-child	选择所有最后span元素
A:nth-last-child	所有含父子关系的倒数第三个元素且为A
A:first-of-type	第一个类型为A的选择器
A B:only-of-type	B在只有一个元素的A中
A:last-of-type	最后一个元素为A的 如AABBAA选中第2和第4个A
div:empty	每一个没有子元素的div
A:not(.small)	class不为small的A
[attribute]	attribute="anyth-value" attribute可以任意设
[attribute="value"]
A[attribute^="value"]	选择属性值以value开头的A元素
A[attribute$="value"]	选择属性值以value结尾的A元素
A[attribute*="value"]	选择属性值以包含value的A元素

 优先级：* < 标签选择器 < class < id < 行内 < !important