css 总结日常工作用到的选择器

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