学习目标:
了解并掌握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










