如何在元素内禁用全局样式答案

【问题标题】：How to disable a global style when within an element如何在元素内禁用全局样式
【发布时间】：2021-07-08 02:27:02
【问题描述】：

我们目前正在使用 Tailwin 自定义 CSS 在这里找到 https://github.com/tailwindlabs/tailwindcss/pull/116 这个 css 的目的是通过设置边框宽度属性轻松地为元素添加边框，我们可以将所有元素的默认边框样式更改为纯色并使用边框隐藏它们的宽度

*,
 *::before,
 *::after {
   border-width: 0;
   border-style: solid;
   border-color: transparent;
 }

这部分 css 在系统范围内使用，遗憾的是我无法删除它。有没有办法阻止这个 css 应用于某个类或 ID？

例如，如果元素有一个类 disableTailwind，它应该忽略那个 css 块。

任何提示或建议将不胜感激。

【问题讨论】：

标签： html css

【解决方案1】：

你不能在每个页面上的原始文件之后在一个 css 文件中包含相同的规则吗？

*,
 *::before,
 *::after {
   border-width: 1px;
   border-style: solid;
   border-color: black;
 }
 
 
 
 *,
 *::before,
 *::after {
   border-width: unset;
   border-style: unset;
   border-color: unset;
 }

&lt;div&gt;test&lt;/div&gt;

【讨论】：

这个问题，同一个页面可能有元素使用它，也不需要使用它。我的应用程序非常动态。页面可能会也可能不会。我需要这样做，这样这些样式都不会出现在某个元素和其中的子元素中
您可以覆盖内部元素的 css。此规则在 css 链中非常早期。

【解决方案2】：

将border:0; 或border:none; 添加到该类或ID。

【讨论】：

【解决方案3】：

例如，如果元素有一个类 disableTailwind，它应该忽略那个 css 块。

所以，这就是 :not(...) 伪类的用例，虽然为了让它工作，我不得不把 body 放在 * 选择器之前：

body *:not(.disableTailwind),
body *:not(.disableTailwind)::before,
body *:not(.disableTailwind)::after {
   border-width: 3px;
   border-style: solid;
   border-color: red;
 }

<body>
 <div>Without .disableTailwind</div>
 <div class="disableTailwind">With .disableTailwind</div>
 <br />
 <button>Without .disableTailwind</button>
 <button class="disableTailwind">With .disableTailwind</button>
</body>

【讨论】：

很好的建议。请问您是否有任何想法如何调整它，以便父级禁用TailWind 的任何子元素也将被禁用？