第一类:
: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,本身优先级是括号里面选择器决定的
一些有帮助的CSS3伪类选择器
最新推荐文章于 2023-04-20 16:27:30 发布