某天无聊的时候，想起了关系选择器~

常见的有四种

'+' 相邻兄弟选择

'~' 通用兄弟选择器

'>' 子选择器

' ' 后代选择器（只要是后代就好了）

还在实验中的一个功能

'||'

为什么说有意思呢，首先因为它们不会影响优先级，要注意的是同级还是后写的覆盖先写的

用关系选择器也可以用来做到一些伪类选择器可以实现的效果

选择某个特定的元素, 比如第三个 p 标签

p:first-of-type + p + p

===

p:nth-child(3)

第二个元素之后的元素

p:first-of-type + p + p ~ * {
  color: pink
}

==

p:nth-child(3) ~ *{
   color: pink
}

==

p:nth-child(n+4){
  color: pink;
}

上面的代码在我写文章的时候，其实我已经感到一些差异性了。

比如，伪类选择器 nth-child ，运用在同一个标签的选择上。关系选择器则是可以运用在多种标签。

当然考虑到实际业务中可能会有各种变态的结构。各位看官还请仔细斟酌，切勿盲从