css 选择器是日常工作中必须要掌握的一部分,事实上只要能灵活运用它,是可以节省许多 JS 的,这点我深有体会,关于 css 选择器怎么使用官方已经足够详细了,而且掌握选择器不是一天两天的事,需要自己不断积累运用,这里不在阐述,下面是笔者整理日常工作中长用到的选择器列表供给新手看,以免学习太多比较偏僻的选择器。
选择器
标签选择器:尽量少用,因为 css 的计算从右往左,而标签又是全局性的,性能略差
div / span / a / nav / haeder / main / footer / form / ul / ol / li / img / 等等
ID 选择器
#xxx
类选择器
.xxx
兄弟选择器
+
相邻选择器
~
父子选择器
>
伪类选择器
:nth-child()
:first-child
:last-child
:before / :after
:hover / :active
逻辑伪类选择器
:not
:empty
属性选择器
input[type=''text"]
、div[data='test']
、div[id='xxx']
…
所有选择器支持混合使用,比如:
.my-class > .item-class:first-child :empty {
....
}