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

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

@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を用意する

<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>

以上。

追伸

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

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