如何在 CSS 中省略應用某些類的樣式

Question

我正在對 OSS 項目之一進行 PR，但我堅持要執行以下操作：

<div class="vp-doc">
  <p>styled</p>
  <div class="vp-raw">
    <p>not styled</p>    
    <div>
      <p>not styled</p>    
    </div>
  </div>
</div>

假設我有放置在.vp-doc內的所有 p 標簽的樣式，但如果任何祖先有.vp-raw類，則排除。

我在下面嘗試但沒有奏效：

.vp-doc {
  :not(.vp-raw) {
    h1 {
      color: red;
    }    
  }
}

注意： p元素可以嵌套更深。

感謝@fabrizio-calderan，我能夠更接近但all: revert它還會刪除其他樣式，如片段所示。

 p { font-weight: 600; color: green; } .vp-doc p { color: red; } .vp-raw p { all: revert; }

 <div class="vp-doc"> <p>styled</p> <div class="vp-raw"> <p>not styled</p> <div> <p>not styled</p> </div> </div> </div>

真實場景：

我正在開發VitePress ，它有 vp-doc 類，它為 Markdown（h1、p、標簽等）添加樣式。 但是，當我們在文檔中使用組件進行演示時，組件的 h1、p 等標簽也會獲得樣式。 我在 repo 中打開了一個問題並進行了處理。 我們決定添加具有顯示結構的.vp-raw類，以避免通過vp-doc添加樣式。 這是一種與vp-doc樣式的隔離，但其他樣式（由組件添加）應該保留。

謝謝。

Answer 1

您可以為.vp-doc p應用樣式並恢復.vp-raw p的所有屬性

 .vp-doc { color: cornflowerBlue; } .vp-doc p { color: yellowgreen; font: 600 2rem system-ui; } .vp-raw p { /* resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet */ all: revert; } /* or .vp-doc .vp-raw * { all: revert; } */

 <div class="vp-doc"> <p>styled</p> <div class="vp-raw"> <p>not styled</p> <div> <p>not styled</p> </div> </div> </div>

在這個例子中， revert應用了初始的font-weight 、 font-size和font-family ，但是段落的color是從其父級繼承的。