CSS技巧-伪元素 :not() 和 :has()

:not() CSS 伪类用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。

CSS 函数式伪类 :has() 表示一个元素，如果作为参数传递的任何相对选择器在锚定到该元素时，至少匹配一个元素。这个伪类通过把可容错相对选择器列表作为参数，提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。

缺点：兼容性差，不考虑兼容性可考虑

<template>
  <el-card>
    <el-button class="btn" text bg>111</el-button>
    <el-button class="btn" text bg>111</el-button>
    <el-button class="btn" text bg>
      <span class="span">222</span>
    </el-button>
  </el-card>
</template>

<style scoped lang="scss">
.btn {
  // 排除第一个按钮
  &:not(:first-child) {
    background-color: #000 !important;
    color: #fff;
  }

  // 子元素包含有 .span 的按钮才生效
  &:has(.span) {
    background-color: skyblue !important;
  }
}
</style>