一些有帮助的CSS3伪类选择器

第一类：
：nth-child(N) 选择器
选择器匹配属于其父元素的第 N 个子元素，不论元素的类型
：last-child（N）
选择器匹配属于父元素的倒数第N个子元素，不论元素的类型
li：nth-child(N)
选择器匹配属于其父元素的第 N 个子元素,且该元素为li类型匹配，否则不匹配
第二类
:nth-of-type()
1 选择器匹配那些在相同兄弟节点中的位置与模式 an+b 匹配的相同元素。
2 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
li:nth-of-type(M)
匹配属于父元素的特定类型的第M个子元素
:nth-last-of-type(n)
选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数。
第三类
:empty
可以匹配空元素（里面没有任何东西，包括注释，空格，甚至换行符）。
第四类
:scope
可以用在querySelector和querySelectorAll API中，表示匹配调用这两个API的元素。然后在CSS代码中使用:scope是没有任何意思，跟:root一样的。于是pageStart.querySelectorAll(":scope div div")意思是，匹配"#pageStart div div"选择器，同时是pageStart的子元素。
第五类
~=是单词匹配
例如"page page-start"，里面就有两个单词（page 和 page-start）
|=是起始匹配
注意：“page page-start"是无法匹配|=，虽然起始是page。只能匹配"page"以及"page-xxx”
例子：document.querySelectorAll(‘div[class~=page]’)
第六类
:not()伪类是逻辑匹配伪类，本身优先级（权重）是0，本身优先级是括号里面选择器决定的