你能在 CSS 中使用條件邏輯嗎?
CSS 本身不支援 If-else 條件。但是,有多種方法可以實現類似的功能。
CSS 類別:
如果您可以控制 HTML,則可以使用 CSS 類別來應用不同的樣式在一個變數上。例如:
<p class="normal">Text</p> <p class="active">Text</p>
p.normal { background-position: 150px 8px; } p.active { background-position: 4px 8px; }
CSS 預處理器(例如 Sass):
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; } .one { background-color: var(--main-bg-color); } .two { background-color: black; }
伺服器端預處理:
您也可以使用伺服器端語言預處理樣式表。例如,在PHP 中:
p { background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px; }
其他技術:
對於更複雜的場景,您可以探索諸如「If/ Else in CSS」作者:Ahmad CSS Shadeed。
以上是如何在 CSS 中模擬條件邏輯?的詳細內容。更多資訊請關注PHP中文網其他相關文章!