CSS只能選一個

CSS是前端開發中不可或缺的一部分，它能夠控制整個頁面的樣式，包括字體、顏色、布局、動畫等等。但是在實際開發中，經常會遇到一個問題：在多個樣式中，只能選取一個樣式生效。

如何解決這個問題呢？以下幾種方法可能會幫到你：

1. 使用!important
!important是CSS中的一個重要關鍵詞，它可以使樣式優先級最高。例如，假設你有兩個class，一個是red，一個是blue，它們都控制相同的元素的顏色。為了在兩個class中只選擇一個，你可以在想要強制生效的class后面寫上!important。示例代碼如下：
.red {
color: red !important;
}
.blue {
color: blue;
}
在這個例子中，紅色優先級更高，所以如果你同時添加red和blue兩個class，紅色就會被選擇。

2. 使用JavaScript
JavaScript提供了一種直接控制樣式的方法。使用它，你可以在事件觸發時設置樣式屬性或使用class控制樣式。示例代碼如下：
document.getElementById("myElement").style.color = "red";
或
document.getElementById("myElement").classList.add("active");
在這個例子中，當點擊指定ID的元素時，它們都會使元素變為紅色或者應用一個active class來顯示它的狀態。

3. 使用CSS變量
CSS變量是CSS3的一項新特性，它允許你定義一個變量并在全局范圍內使用。創建一個CSS變量非常簡單。在其根選擇器中，使用--符號創建它。然后，使用var函數進行引用。示例代碼如下：
:root {
--primary: red;
}
.myClass {
color: var(--primary);
}
在這個例子中，我們創建了一個變量叫做“primary”。這個變量設置為紅色，然后在class中引用。這樣，每次修改“primary”變量時，class中的樣式也會自動改變。

總之，選擇一個樣式來生效并不是一件容易的事情。但是，通過使用!important、JavaScript和CSS變量等方法，你可以輕松地解決這個問題。