选定模块的 Unscope 范围 css 样式

Question

我一直在尝试不为DOM层次结构中的某个元素应用范围样式。

用例是我想在特定元素的小部件中应用父页面主题中定义的样式。

      body {
        font-family: 'Times New Roman', Times, serif;
        font-weight: 400;
        font-style: normal;
        color: #2b2b2b;
        background: white;
        line-height: 1.65;
      }

      button {
        font-family: 'Times New Roman', Times, serif;
        background-color: green;
      }

      .scope {}

      .reset {
        composes: scope;
      }

      .reset div,
      .reset button {
        font-size: 32pt;
        font-family: sans-serif;
      }

      .reset button {
        background-color: blue;
      }

<html>
  <head>
    <title>Unscope scope</title>
  </head>

  <body style="background-color: rgb(194, 194, 194)">
    <h1>Hello</h1>
    <button type="button">
      Standard style button
    </button>
    <div id="app" class="reset">
      <div>
        <button type="button">
          Scope style button
        </button>
      </div>
      <div>
        <button type="button" class="unscoped">
          Unscoped style button
        </button>
      </div>
    </div>
  </body>
</html>

这也是我想要的样子：

Answer 1

您可以在 CSS 中使用 :not 伪 class 来确保您只将样式应用于没有内部选择器的元素。

这就是你的情况：

body {
  font-family: 'Times New Roman', Times, serif;
  font-weight: 400;
  font-style: normal;
  color: #2b2b2b;
  background: white;
  line-height: 1.65;
}

button {
  font-family: 'Times New Roman', Times, serif;
  background-color: green;
}

.scope {}

.reset {
  composes: scope;
  /* ^ I don't think this is valid CSS or at least I've never seen this */
}

.reset button:not(.unscoped) {
  /*          ^ See the change here */
  font-size: 32pt;
  background-color: blue;
  font-family: sans-serif;
}

<html>
  <head>
    <title>Unscope scope</title>
  </head>

  <body style="background-color: rgb(194, 194, 194)">
    <h1>Hello</h1>
    <button type="button">
      Standard style button
    </button>
    <div id="app" class="reset">
      <div>
        <button type="button">
          Scope style button
        </button>
      </div>
      <div>
        <button type="button" class="unscoped">
          Unscoped style button
        </button>
      </div>
    </div>
  </body>
</html>

选定模块的 Unscope 范围 css 样式

Unscope scoped css style for selected module

html

css

css-selectors