1、.class | 类选择器
选择所有class="class"的元素
2、#firstname | id选择器
选择所有id="firstname"的元素
3、* | 通配符选择器
选择所有元素
4、p |标签选择器
选择所有<p>元素
5、div,p |并集选择器
选择所有<div>元素和<p>元素
6、 div p | 后代选择器
选择<div>元素内的所有<p>元素
7、div>p | 子选择器
选择所有父级是 <div> 元素的 <p> 元素
8、div+p | 相邻兄弟选择器
选择所有紧跟在 <div> 元素之后的第一个 <p> 元素
属性选择器
9、[target] |
选择所有带有target属性元素
10、[target=-blank]
选择所有使用target="-blank"的元素
11、[title~=flower] IE8之下使用，就不学了吧
选择标题属性包含单词"flower"的所有元素
伪类选择器
12、 a:link
选择所有未访问链接
13、 a:visited
选择所有访问过的链接
14、 a:active
选择活动链接
15、 a:hover
选择鼠标在链接上面时
16、input:focus
选择具有焦点的输入元素
17、p:first-letter
选择每一个<p>元素的第一个字母
18、p:first-line
选择的p元素在父元素的第一个位置
19、p:first-child
匹配<p>的父元素的第一个p元素
例子：
因为a的父元素是div，div的第一个子元素是a，所以会改变颜色
此时a元素的父元素是div，但是div的第一个子元素不是a，是p，所以不会有任何改变
last-child原理是一样的，因为p元素的父元素是div，但是div的最后一个子元素是div不是p，所以不会有变化，如果想有变化，就把最后的class=div2的div删除，就行了
20、p:first-of-type
选择的p元素是其父元素的第一个出现的p元素
思考💡：p:first-child和p:first-of-type的区别？
因为感觉说的都是父元素的第一个，那怎么就结果不一样了呢?
分析：first-child呢，看重的是位置，就是必须是第一个，p元素必须在位置上是第一个，如果第一个不是p，就不会有样式的展示了，但是first-of-type看重的是type，也就说，样式是一定会显示的，只要的在div里遇到的第一个p就会改变样式，哪怕p之前有1000个span，那他也是div里第一个p，所以一定会显示(即使前路漫漫都不是你，我也一定要找到第一个你，改变你，有点浪漫😊😊😊)
21、p:last-of-type
选择每个p元素是其父级的最后一个出现的p元素
那如果理解了，p:first-child和p:first-of-type的区别，那p:last-child和p:last-of-type的区别也没有问题了
22、p:only-of-type
选择每个p元素是其父级的唯一p元素
父元素里可以有别的元素，但是只有一个p元素
23、p:only-child
选择每个p元素是其父级的唯一子元素
父元素里只有我一个p元素，不可以有其他元素
24、p:nth-child(3)
选择每个p元素是其父级的第三个子元素
25、 p:nth-of-type(3)
选择每个p元素是其父级的第三个p元素
还是那句话，p:nth-of-type(3)就是找第3个p，总要找到，p:nth-child(3)，就是第三个，是p我就干事，不是p我就不干，坚决不干
26、p:nth-last-child(2)
到数第二个不是p，啥也不干~
27、p:nth-last-of-type(2)
综上所述，就是只要是child类，只要对应位置不是，他就不干了，只要是type类，他会知道第n个p，找到就干活，这么对比的话，其实感觉像2种人，child要极端一些，只要结果不是，不满意，就罢了，type要温和一些，自己会慢慢寻找，会遵守自己的约定，更喜欢type一些
