資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究CSS 中的 if/else 條件
使用者無法在 CSS 中直接使用 if/else 條件。對於 CSS 中的條件樣式，我們必須使用 if/else 條件的替代方案。我們將瞭解三種在 CSS 中使用條件樣式的不同替代方法。
在本文中，我們的任務是在 CSS 中實現 if/else 條件。由於 CSS 不支援 if/else 條件，我們將瞭解其替代方法。
在 CSS 中使用條件樣式的方法
以下是我們在本文中將討論的在 CSS 中使用條件樣式的方法列表，包括分步說明和完整的示例程式碼。
使用 :checked 偽類選擇器
為了在 CSS 中使用條件（if/else）樣式，我們使用了 :checked 偽類選擇器和一個普通兄弟 組合符。
- 我們使用了 input 標籤和 type 屬性建立了五個單選按鈕，並使用 labels 為其新增標籤。然後，我們建立了五個包含相應顏色資訊的 div 元素，並將它們包裝在類為 output 的 div 中。
- 我們使用了 #output>div 透過 display 屬性最初隱藏所有 div 元素，並設定 div 元素文字的 font-size。
- 然後，我們使用 :checked 偽類選擇器和普通 兄弟組合符 來顯示與選中的單選按鈕對應的顏色名稱。
- 例如：當 id 為 orange 的單選按鈕被選中時，#orange:checked ~ #output .orange 會定位 id 為 output 的 div 中類為 orange 的 div 元素。因此，當 id 為 orange 的單選按鈕被選中時，它會顯示類為 orange 的 div 元素。
- 然後，我們使用與顏色名稱對應的類在選中單選按鈕時更改文字 顏色。
示例
這是一個完整的示例程式碼，它實現了上述步驟，用於使用 :checked 偽類選擇器和 普通兄弟組合符(~) 在 CSS 中進行條件樣式。
<html>
<head>
<style>
#output>div {
font-size: 20px;
display: none;
}
#red:checked ~ #output .red,
#green:checked ~ #output .green,
#blue:checked ~ #output .blue,
#yellow:checked ~ #output .yellow,
#orange:checked ~ #output .orange {
display: block;
}
.red {
color: red;
}
.green {
color: green;
}
.blue {
color: blue;
}
.yellow {
color: yellow;
}
.orange {
color: orange;
}
</style>
</head>
<body>
<h4>
Check the radio buttons to get color name
</h4>
<input type="radio" name="color" id="red" value="red">
<label for="red">Red</label>
<input type="radio" name="color" id="green" value="green">
<label for="green">Green</label>
<input type="radio" name="color" id="blue" value="blue">
<label for="blue">Blue</label>
<input type="radio" name="color" id="yellow"
value="yellow" checked>
<label for="yellow">Yellow</label>
<input type="radio" name="color" id="orange" value="orange">
<label for="orange">Orange</label>
<br><br>
<div id="output">
<div class="red">You have selected red color.</div>
<div class="green">You have selected green color.</div>
<div class="blue">You have selected blue color.</div>
<div class="yellow">Yellow color is selected by default.</div>
<div class="orange">You have selected orange color.</div>
</div>
</body>
</html>
使用媒體查詢
在這種使用 CSS 中條件（if/else）樣式的方法中，我們使用了 媒體查詢 來根據視口寬度更改 div 盒子的背景顏色。
- 我們使用了 div 建立了一個盒子，並使用 height 和 width、background-color 設定其尺寸，並使用 top、left 和 position 屬性對其進行定位。
- 然後，我們使用 媒體查詢 為不同的寬度值設定 div 盒子的不同顏色。例如，對於寬度為 600px 或更大的盒子顏色為綠色，對於 800px 或更大的盒子顏色為紅色。
示例
這是一個完整的示例程式碼，它實現了上述步驟，用於使用 媒體查詢 在 CSS 中進行條件樣式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
height: 300px;
width: 300px;
background-color: lightblue;
top: 10%;
left: 20%;
position: absolute;
}
@media (min-width: 600px) {
.container {
background-color: #04af2f;
}
}
@media (min-width: 800px) {
.container {
background-color: red;
}
}
@media (min-width: 1000px) {
.container {
background-color: #031926;
}
}
</style>
</head>
<body>
<strong>
Chnage the screen resolution to see the
change in background color
</strong>
<div class="container"></div>
</body>
</html>
輸出
使用 :hover 偽類
在這種方法中，我們使用了 :hover 偽類在 CSS 中使用條件（if/else）樣式。
- 我們使用了四個 div 建立了四個盒子，並在其中添加了一些文字。我們使用 div 作為元素選擇器，透過設定 padding、border 和 div 元素的 background-color 來設定所有 div 元素的樣式。
- 我們居中了文字，並使用 color 屬性更改了文字顏色。
- 然後，我們使用 :hover 偽類在將滑鼠懸停在 div 元素上時設定其背景顏色。
示例
這是一個完整的示例程式碼，它實現了上述步驟，用於使用 :hover 偽類在 CSS 中進行條件樣式。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
div {
padding: 30px;
text-align: center;
background-color: lightblue;
border: 1px solid white;
color: white;
}
.color1:hover {
background-color: #04af2f;
}
.color2:hover{
background-color: #031926;
}
.color3:hover {
background-color: #CDC1FF;
}
.color4:hover{
background-color: #2E073F;
}
</style>
</head>
<body>
<strong>
Hover over boxes to see the change
in background color
</strong>
<div class="color1">This is div 1</div>
<div class="color2">This is div 2</div>
<div class="color3">This is div 3</div>
<div class="color4">This is div 4</div>
</body>
</html>
結論
在本文中，我們學習並瞭解瞭如何在 CSS 中使用 if/else 條件的替代方案。我們使用了三種在 CSS 中進行條件樣式的方法，分別是：使用 :checked 偽類和 兄弟 組合符、使用 媒體查詢 和使用 :hover 偽類。
更新時間： 2024年11月14日
4K+ 瀏覽量
廣告