能否基于包含元素的CSS样式效果调整目标CSS规则？

可以通过CSS变量结合属性选择器实现需求，不用枚举所有嵌套组合：

步骤1：标记斜体环境 #

给所有触发斜体的元素（<em>标签和你的自定义斜体类）设置样式时，添加一个CSS变量标记当前环境为斜体状态：

/* 替换成你实际的斜体类名，比如.italic-text、.emphasize等 */
em, .italic-class-1, .italic-class-2 {
  font-style: italic;
  --is-italic: 1;
}

步骤2：反转嵌套的斜体类样式 #

用属性选择器匹配处于斜体环境中的自定义斜体类，将其字体样式重置为正常，同时更新变量避免多层嵌套重复触发：

/* 同样替换成你的斜体类名 */
[--is-italic="1"] .italic-class-1,
[--is-italic="1"] .italic-class-2 {
  font-style: normal;
  --is-italic: 0;
}

工作原理 #

• CSS变量会沿DOM树继承，当父元素已标记--is-italic:1时，属性选择器[--is-italic="1"]会匹配该父元素，进而选中其内部的斜体类。
• 重置--is-italic:0是为了防止多层嵌套（比如.italic-class-1 em .italic-class-2）时，中间的斜体环境继续触发反转规则，确保每一层嵌套仅切换一次样式。

进阶：支持多层嵌套切换 #

如果需要实现“嵌套一次切换一次斜体状态”的效果（比如斜体→正常→斜体循环），可以用递增的变量值结合CSS计算：

em, .italic-class-1, .italic-class-2 {
  --italic-level: calc(var(--italic-level, 0) + 1);
  font-style: calc(var(--italic-level) % 2 = 1) ? italic : normal;
}

这种写法依赖现代浏览器对CSS calc()条件判断的支持，可根据目标浏览器兼容性选择是否使用。

内容的提问来源于stack exchange，提问作者Jeff Zeitlin