如何在 CSS 中實現條件樣式？

CSS 中的條件樣式：探索替代方案

傳統上，CSS 本身不支援 if/else 條件。但是，有多種方法可以實現條件樣式。

CSS 類別

一種方法涉及使用 CSS 類別為不同的條件定義不同的樣式。例如，您可以建立兩個類別：

<p class="normal">Text</p>
<p class="active">Text</p>

並在 CSS 檔案中：

p.normal {
  background-position: 150px 8px;
}
p.active {
  background-position: 4px 8px;
}

此方法受到廣泛支持，並允許對條件進行執行時評估。

CSS 預處理器

CSS 預處理器（例如Sass）提供條件語句，允許您編寫如下程式碼：

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

雖然這提供了更大的靈活性，但它需要預處理，這可能會影響效能。

自訂屬性（CSS 變數）

現代瀏覽器支援的自訂屬性允許對條件進行執行時間評估。您可以定義一個自訂屬性，例如：

:root {
  --main-bg-color: brown;
}

然後在CSS 中使用它：

.one {
  background-color: var(--main-bg-color);
}
.two {
  background-color: black;
}

伺服器端預處理

伺服器端預處理器可以產生基於動態值的條件CSS。例如，您可以編寫以下程式碼：

p {
  background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}

但是，由於需要伺服器端渲染，這種方法可能會對效能產生影響。

純 CSS 技術

最後，Ahmad Shadeed 的文章示範了各種純 CSS 技術，用於在不依賴外部機制的情況下解決條件 UI 場景。

以上是如何在 CSS 中實現條件樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！