如何为.x-pp-plan下所有子元素设样式但排除.performance-component

现有CSS规则如下：

.x-pp-plan , .x-pp-plan * {
  font: normal normal normal 15px/120% Arial;
  color: #666;
}

需要将该样式应用于.x-pp-plan下的所有子组件，但排除.performance-component元素及其内部所有子元素。之前尝试用*:not(.performance-component)的写法无效。

你之前的写法失效，是因为*:not(.performance-component)只会排除直接带.performance-component类的元素，但它的子元素依然会被通配符*选中并应用样式。要彻底排除目标组件及其内部元素，可以用以下两种方法：

方法一：先全局应用，再重置排除元素样式 #

先给.x-pp-plan及其所有子元素应用样式，再针对.performance-component及其子元素重置回默认样式：

/* 基础样式：应用于.x-pp-plan和所有子元素 */
.x-pp-plan, .x-pp-plan * {
  font: normal normal normal 15px/120% Arial;
  color: #666;
}

/* 重置排除元素的样式 */
.x-pp-plan .performance-component, .x-pp-plan .performance-component * {
  font: inherit;
  color: inherit;
  /* 若有其他需要重置的属性，可在此补充 */
}

方法二：使用精准的:not()选择器组合（CSS3+支持） #

通过选择器组合，直接跳过.performance-component及其所有后代元素：

.x-pp-plan,
.x-pp-plan :not(.performance-component),
.x-pp-plan :not(.performance-component) * {
  font: normal normal normal 15px/120% Arial;
  color: #666;
}

这个写法的逻辑是：选中.x-pp-plan本身，加上所有不是.performance-component的子元素，再递归选中这些子元素的后代，这样.performance-component及其内部元素就不会被选中。

内容的提问来源于stack exchange，提问作者Naty S.