启用禁用不同页面上的 CSS 样式，特别是 *、html、body 标签答案

【问题标题】：Enable disable CSS style on different page particularly *, html, body tags启用禁用不同页面上的 CSS 样式，特别是 *、html、body 标签
【发布时间】：2021-08-12 05:54:57
【问题描述】：

*, *::after, *::before {
  box-sizing: border-box;
 }



html, body {
  font-size: 100%;
  scroll-behavior: smooth;
  position: relative;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #141414;
  color:#fff;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 10px;
  line-height: 1.2;


}

main { 
  margin : 0;
  padding: 0;;
}

上面的 css（包含通配符、html、body、main）我正在导入到我的应用程序的组件中，没有使用 css 模块。问题是它们与使用自己的 css 的不同路由和页面上的样式冲突。

它不是像<link rel='stylesheet' id= 这样的外部样式表，所以它没有id，它只是在<head> 中显示为<style type="text/css">...</style>,...

问题：
上面的 css 我只想在一条路由上启用，例如我想在页面 /a 上启用它，但我想在页面 /b 上完全重置或删除它们。我该如何实现？

我还看到了React Routes - different styling on body css tag 和How to apply CSS to HTML body element?

【问题讨论】：

我要做的是将!important 添加到相似的样式中。例如在组件特定的 css body{padding: 0 !important;}
我不知道我对你的理解是否正确，但你可以在你的身体上应用一个“page-a”类，然后为这个类添加css。
如果我回到上一页怎么办。我不希望 !important 覆盖错误的样式。它必须正确切换
@ent3 如果我有一个 .page-a 类，我如何在命名的 css 块中包含 *, *::after, *::before？
你在使用一些框架吗？因为如果没有，那么您就不能在您不希望它存在的页面的头部放置 css ...并且要在 cmets 中回答您的问题，您可以这样做：.page-a *, .page-a *::after, .page-a *::after。这意味着.page-a等里面的所有东西

标签： css

【解决方案1】：

对此有不同的解决方案，但最好的解决方案似乎是在组件的第一次挂载时为 body 添加不同的类名，并在卸载时删除此类名。其他解决方案是在具有以下 css 功能的组件中使用主 div

 { 
      position: absolute;
      top:0;
      bottom:0;
      right:0;
      left:0;
    }

那么 body 将留在这个 div 后面，你可以在这个 div 中做你想要的每一个修改。但我真的建议你使用第一种方式。

【讨论】：