如何通过CSS实现tile-container与chart-container类互斥应用？

你可以通过CSS选择器的优先级特性实现需求：当父元素带有tile-container类时，重置子元素chart-container的所有自定义样式；父元素无此类时，保留chart-container的原有样式。

具体实现代码 #

/* 父元素无tile-container时，chart-container的生效样式 */
.chart-container {
  /* 这里写入你的chart-container原有样式，示例： */
  width: 100%;
  height: 400px;
  padding: 1rem;
  background-color: #f0f0f0;
}

/* 父元素有tile-container时，重置chart-container的样式，使其"不生效" */
.tile-container .chart-container {
  /* 重置所有自定义样式为浏览器默认值 */
  width: initial;
  height: initial;
  padding: 0;
  background-color: transparent;
  /* 按需添加其他需要重置的属性 */
}

原理说明 #

• CSS选择器优先级：.tile-container .chart-container（复合选择器）的优先级高于单独的.chart-container（类选择器），所以当父元素存在tile-container类时，会优先应用重置后的样式，覆盖原有样式。
• 若要快速重置所有样式，可使用all: unset（现代浏览器均支持），代码更简洁：

.tile-container .chart-container {
  all: unset;
  /* 可选：保留必要的默认布局属性，比如 */
  display: block;
}

注意事项 #

• 确保重置样式的CSS规则写在chart-container原有样式之后，或通过优先级保证其能覆盖原有样式。

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