自己总结，如有错误，敬请斧正！
简单选择器
1. ID选择器
2. 元素选择器
3. 类选择器
4. 通配符选择器
*{
}/*选中所有元素*/
5. 属性选择器
根据属性名和属性值来选中元素
[href]{
}/*选中所有有href属性的元素*/
[href="https://www.sina.com"]{
}/*选中属性为href，且属性值为https://www.sina.com的元素*/
<a class="a b c d" href="">
[class~="b"]{
}/*类似于类选择器(更实用)
.b{}*/
<a class="abcd" href=" ">
[class*="b"]{
}/*包含b字母的类即被选中*/
<a href="https://www.baidu.com">
[href$="baidu.com"]{
}/*属性值为baidu.com且属性为href即被选中*/
6. 伪类选择器
选中某些元素的某种状态
link 超链接未被访问的状态
:link{
}/*选中未被访问的超链接所有元素*/
a:link{
}/*选中未被访问的超链接的a元素*/
visitd 超链接访问过后的状态
:visited{
}/*选中已被访问的超链接的所有元素*/
a:visited{
}/*选中已被访问的超链接的a元素*/
hover 鼠标悬停状态
:hover{
}/*选中鼠标悬停时的所有元素*/
a:hover{
}/*选中鼠标悬停时的a元素*/
active 鼠标激活状态
active{
}/*选中鼠标激活时的所有元素*/
a:active{
}/*选中鼠标激活时的a元素*/
代码形式必须以link visited hover active进行书写，遵循爱恨法则，否则会出现问题
7. 伪元素选择器
<p>
学习<span>HTML和CSS</span>
</p>
span::befor{
}/*HTML被选中*/
span::after{
}/*CSS被选中*/
选择器组合
1. 并且
a[href=""]{
}/*a元素并且含有href属性被选中*/
<p class="red"></p>
p.red{
}/*p元素并且含有red类的被选中*/
2. 后代元素——空格
<div class="red">
afafafawfwfawf
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
.red li{
}/*选中red类的后代元素li（也可使用ID）*/
3. 子元素——>
<div class="abc">
<p>Lorem</p>
<p class="bcd">Sada</p>
<p>FAF</p>
</div>
.abc>.bcd(所有选择器均可){
}
4. 相邻兄弟元素—— +
<div>
<ul>
<li class="a">a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>
</div>
.a+li{
}/*紧挨着的li被选中*/
5. 兄弟元素—— ~
<div>
<ul>
<li class="a">a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>
</div>
.a~li{
}/*含有类a的li元素以下的li元素被选中*/
并列选择器
p,li{
}/*所有的p元素和li元素都被选中*/
来源：CSDN
作者：皮皮晗
链接：https://blog.csdn.net/pipihan21/article/details/104616275