1.标签选择器
代码示例
div{ ?..........样式 ?}<div>.......</div>
<div>.......</div>这种选择器的影响范围大，一般情况下不会单独使用，会应用到层级选择器中。
2.id选择器
代码示例
#box{ ??????.......样式 ???????} <div id="box">....</div> ????这种一般也不用，留给程序员。
3.类选择器
代码示例
.red{样式}.big{样式} <div class="red">....</div><h1 class="red big">....</h1><p class="red mt10">....</p>通过类名选择元素，可以多选，应用比较灵活，可以重用，是应用最多的选择器。
4.层级选择器
代码示例
.box div{样式}<div class="box"> ???<div>....</div></div>选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，防止命名冲突。注意，每个层级之间是用空格分开的，而不是用逗号。
5.组选择器
代码示例
.box1,.box2,.box3{样式}<div class="box1">....</div><div class="box2">....</div><div class="box3">....</div>如果多个标签有同样的样式可以用组选择器。注意，组之间是用逗号分开的，这里一定要和层级选择器做对比不要弄混。
6.伪类/伪元素选择器
代码示例
.box1:hover{样式}.box2:before{样式}.box3:after{样式}<div class="box1">....</div><div class="box2">....</div><div class="box3">....</div>常用的伪类选择器hover，伪元素是before，after。
css选择器
原文地址：https://www.cnblogs.com/xzk666/p/10153131.html