CSS 选择符有哪些

1. id选择器（#id）
2. 类选择器（.classname）
3. 标签选择器（div, h1, p, …）
4. 后代选择器（div p）
5. 相邻后代选择器（子选择器）（ul > li）
6. 兄弟选择器（li ~ a）
7. 相邻兄弟选择器（li + a）
8. 属性选择器（a[rel]=“external”]）
9. 伪类选择器（a:hover, li:nth-child）
10. 伪元素选择器（::before, ::after）
11. 通配符选择器（*）

补充一下兄弟选择器和相邻兄弟选择器的不同😀

<!--HTML代码-->
<p>第一个P</p>
<p>第二个P</p>
<h1>第一个h1</h1>
<p>第三个P</p>
<p>第四个P</p>
<p>第五个P</p>

先看看效果👇

接下来添加一个兄弟选择器：

h1 ~ p {
	color: red;
}

效果如下👇

可以看到 h1 标签以下的所有 p 标签中的文字都变红了

接下来看相邻兄弟选择器：

h1 + p {
	color: red;
}

效果如下👇

那么就是 h1 后面第一个相邻的兄弟 p 元素变红了

两者的区别还是很好理解的，自己试一试吧 ~