如何在不使用 if/else 語句的情況下在 CSS 中實作條件樣式？

<p>

<p>CSS 中的條件樣式：超越if/else

<p>在CSS 中，傳統的if/else 語句對於條件樣式似乎很誘人。然而，這本身並不支持。相反，請考慮替代方法：

<p>基於類別的樣式：

<p>將類別分配給 HTML 元素並相應地定義樣式規則。例如：

<p>

<p>在CSS 中：

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

<p>CSS 預處理器：

<p>使用Sass 等預處理器引入條件語句：

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

<p>請注意，預處理器需要預處理，並且條件在編譯時評估。

<p>自訂屬性：

<p>利用自訂CSS 屬性（CSS 變數） ) 用於執行時間評估：

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

<p>服務器端預處理：

<p>使用服務器端語言（例如PHP）預處理樣式表：

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

<p>其他技術：

<p>請參閱Ahmad Shadeed 的文章，以了解進階CSS 技術，以在沒有if/else 的情況下解決條件樣式問題。

以上是如何在不使用 if/else 語句的情況下在 CSS 中實作條件樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！