怎么在保留 hover 类的情况下设置字体颜色？

在使用 UI 框架进行业务开发时，UI 框架一般都是内置一套 CSS 样式，当我们需要对特定的组件修改样式时，一般会覆盖框架内置的 CSS 样式，但是有时候我们想保留一些框架内置的 CSS，例如：在按钮悬浮的时候保留框架内置的悬浮态，但是修改正常状态下的颜色。此时我们在设置元素的 color 属性是会同时把框架内置的 :hover 伪类下的颜色也覆盖掉，为了避免这种情况，可以使用 :is() 选择器配合 :not() 选择器实现：

.father :is(.son:not(:hover)) {
  // 样式
}

:is() 伪类选择器没有权重，所以在上面的例子中，权重 = .father 类，然后在 is() 中选中子元素，同时子元素必须不是处于鼠标悬浮状态，此样式才有效。

使用这种方式可以巧妙的解决既想保留框架内置的一些样式，同时自己设置一些自定义的样式。