!important が 優先度を逆転させるサンプル

具体的にはこういうスタイルを用意して

```css
@layer layer1, layer2, layer3;
/* 弱い ← → 強い */
/* important は逆転する */
& {
  /* #region layer4 (layer外) */
  --layer4: blue;
  .layer4 {
    background: var(--layer4);

    &.important {
      background: var(--layer4) !important;
    }
  }
  /* #endregion */

  /* #region layer1 (強さ1) */
  @layer layer3 {
    --layer3: green;
    .layer3 {
      background: var(--layer3);

      &.important {
        background: var(--layer3) !important;
      }
    }
  }
  /* #endregion */

  /* #region layer2 (強さ2) */
  @layer layer2 {
    --layer2: yellow;
    .layer2 {
      background: var(--layer2);

      &.important {
        background: var(--layer2) !important;
      }
    }
  }
  /* #endregion */

  /* #region layer1 (強さ3) */
  @layer layer1 {
    --layer1: red;
    .layer1 {
      background: var(--layer1);

      &.important {
        background: var(--layer1) !important;
      }
    }
  }
  /* #endregion */

  background: black;
  body {
    display: contents;
  }
  table {
    background: white;
  }
}
```

こんな html でtableを用意する

```html
<main>
  <table>
    <thead>
      <tr>
        <th>default / !important</th>
        <th></th>
        <th class="layer1">layer1</th>
        <th class="layer2">layer2</th>
        <th class="layer3">layer3</th>
        <th class="layer4">layer4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th rowspan="4">default</th>
        <th class="layer1">layer1</th>
        <td class="layer1"></td>
        <td class="layer1 layer2"></td>
        <td class="layer1 layer3"></td>
        <td class="layer1 layer4"></td>
      </tr>
      <tr>
        <th class="layer2">layer2</th>
        <td class="layer2 layer1"></td>
        <td class="layer2 layer2"></td>
        <td class="layer2 layer3"></td>
        <td class="layer2 layer4"></td>
      </tr>
      <tr>
        <th class="layer3">layer3</th>
        <td class="layer3 layer1"></td>
        <td class="layer3 layer2"></td>
        <td class="layer3 layer3"></td>
        <td class="layer3 layer4"></td>
      </tr>
      <tr>
        <th class="layer4">layer4</th>
        <td class="layer4 layer1"></td>
        <td class="layer4 layer2"></td>
        <td class="layer4 layer3"></td>
        <td class="layer4 layer4"></td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <th rowspan="4">!important</th>
        <th class="important layer1">layer1</th>
        <td class="important layer1 layer1"></td>
        <td class="important layer1 layer2"></td>
        <td class="important layer1 layer3"></td>
        <td class="important layer1 layer4"></td>
      </tr>
      <tr>
        <th class="important layer2">layer2</th>
        <td class="important layer2 layer1"></td>
        <td class="important layer2 layer2"></td>
        <td class="important layer2 layer3"></td>
        <td class="important layer2 layer4"></td>
      </tr>
      <tr>
        <th class="important layer3">layer3</th>
        <td class="important layer3 layer1"></td>
        <td class="important layer3 layer2"></td>
        <td class="important layer3 layer3"></td>
        <td class="important layer3 layer4"></td>
      </tr>
      <tr>
        <th class="important layer4">layer4</th>
        <td class="important layer4 layer1"></td>
        <td class="important layer4 layer2"></td>
        <td class="important layer4 layer3"></td>
        <td class="important layer4 layer4"></td>
      </tr>
    </tbody>
  </table>
</main>
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="yyBYYJM" data-pen-title="default / !important sample" data-user="juner" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/juner/pen/yyBYYJM">
  default / !important sample</a> by juner clarinet (<a href="https://codepen.io/juner">@juner</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

以上。

## 追伸

厳密には style 属性とか例外はある。

https://developer.mozilla.org/ja/docs/Web/CSS/important