同级选择器:
1,~(波浪号): 后续关系, p~p: 表示和 p 元素同在一个父元素下的后续 p 元素 (中间可以隔着其他元素);
如: p~p{color:red;} 如果本页面默认是黑色字体
本段为默认颜色 黑色
本段文字为设置的红色, 以后的在同一个父级下 p 元素都为设置的红色
2,+(加号): 紧随元素, p+p: 紧跟在 p 后面的 p 元素;
如: p+p{color:green;} 如果本页面默认是黑色字体
本段文字为设置的绿色
本段文字为默认的黑色
后代选择器:
1, 空格: p p: p 是 p 的后代元素, p 是 p 的祖先. 该选择器选择所有 p 下的 p 后代元素 (常用的写法).
2,> 箭头: 直系关系, p> p 表示 p 的儿子辈的元素 (和星号是正好相反的).
如: p>p{color:red} 默认为黑色
本段文字颜色为红色
本段文字为默认的颜色 黑色
3,* 星号: 隔代关系, p * p 表示 p 的孙子辈及之后的元素.
如: p*p{color:green} 默认为黑色
本段文字为默认的颜色 黑色
本段文字为绿色
来源: https://www.2cto.com/kf/201808/766230.html