尽管css选择器我们经常使用，但还是有人分不清，或者不知道选择器的全部范围。更有甚者看到文章中的选择器，还表示没有见过。那今天，热心的小药就给大家好好梳理下。
选择器分类
没有章法的混乱记忆，是不科学的。学习技术也是一样，我们应该就结构化思维。这样方便记忆，和日后使用。
选择器通常被分为普通选择器、分组选择器、组合选择器和伪选择器四种。咱们将根据使用频率，从高到低依次详细介绍。
普通选择器
- *: 也就是全局选择器，它作用域全局。而且后面跟其他选择器一同使用。eg: .className{}、#id{}。
- id选择器：就是通过元素上的标签来查找元素。eg: #yourId{}。
- 类选择器：此选择器是元素上标签的className。eg: .className{}。
- 元素选择器：使用这个选择器，你不需要在元素上加任何属性。直接使用元素标签名称即可。eg: div{}、a{}。
- 属性选择器：该选择器是这个分组下，使用频率最少的。需要使用方括号囊括自定义的属性。eg:[attr=value]{}
分组选择器
分组选择器又名列表选择器。也就是同一分组下，都使用当前样式表。该选择器的好处就是可以减少css的重复代码量。用法上，使用逗号分隔多个不同选择器即可。例如：#yourId, .myClassName {}。这时候id为yourId或者class name 为 myclassName的元素同时使用。
组合选择器
如果上个分组是并集，那该组合就是交集。他需要同时符合才可以使用当前样式表。表现形式上分为两种：父子、兄弟。
父子型：
- 空格连接：空格后的代表，组合器选择前一个元素的后代节点。也就是子孙节点都可以。
- \>连接：表示组合器选择前一个元素的子代节点。也就是不能为子代以后的其他节点。
兄弟型：
- ~连接：代表只要在同一个容器下即可。
- +连接：表示要紧跟着选择器前的元素。
最后列组合器：|| 组合器选择属于某个表格行的节点
伪元素选择器
这里要着重区分下:和::，很多人都容易弄混。:用于伪类，::用户伪元素。虽然交叉使用也会生效，但是还是希望大家最受规范。
结束语
技术本事无贵贱，都是解决特定场景的解决方案。虽然，文本属于基础知识的普及，但是全知道并且都能熟练使用的未必很多。望大家有空杯心态，吸取长处，指出错误。欢迎大家为我勘误(评论区、私聊都可)。将不胜感激。
难过归难过，丧归丧，可是还得面对现实。
