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 {
....
}