本文收錄於你其實不用javascript系列，範例原始碼皆收錄於CssTrick
下拉式選單是網頁上很常用到的元素，有時希望能選擇不同選項，套用對應的樣式，這時候會想到，CSS選擇器可以根據屬性的值不同個別定義
/*像是input很常用到的*/
input[type='text']{}
/*select是不是也可以*/
select[value='abc']{}
不過很可惜，沒有辦法對value屬性進行選擇，不過可以偷吃步，利用一個小技巧，將value值寫入data值，CSS可以對data值進行選擇
select[data-chose='my_value']{}
<select data-chose="" onchange="this.dataset.chose = this.value;">
<option value="my_value">1</option>
<option value="your_value">2</option>
<option value="his_value">3</option>
</select>
選擇後，就會將value寫入data-chose，然後CSS就可以選擇到該select，這邊還是要吐槽一下，其實還是用到了javascript，但是幾乎不需要維護，也沒有任何邏輯判斷。這樣可以用在什麼樣的情境呢，像是條文類的東西，要切換多國語系，就可以用，請看線上展示
/*根據各語系的值定義對應的樣式*/
form>select[data-chose='zh-tw']~.zh-tw-info{
display: block;
padding: 1em;
}
form>select[data-chose='zh-cn']~.zh-cn-info{
display: block;
padding: 1em;
}
form>select[data-chose='en']~.en-info{
display: block;
padding: 1em;
}
<form>
Language:
<select data-chose="zh-tw" onchange="this.dataset.chose = this.value;">
<option selected value="zh-tw">繁體中文</option>
<option value="zh-cn">簡体中文</option>
<option value="en">English</option>
</select>
<div class="info zh-tw-info">大多數軟件授權聲明是設計用以剝奪您分享與修改軟件的自由。相反地，GNU通用公共授權力圖保證您分享與修改自由軟件的自由–確保軟件對所有的使用者而言都是自由的。通用公共授權適用於大多數自由軟件基金會的軟件，以及任何作者指定使用本授權的其它軟件。（有些自由軟件基金會的軟件，則適用 GNU函式庫通用公共授權規定。）您也可以讓您的軟件適用本授權規定。</div>
<div class="info zh-cn-info">大多数软件授权声明是设计用以剥夺您分享与修改软件的自由。相反地，GNU通用公共授权力图保证您分享与修改自由软件的自由–确保软件对所有的使用者而言都是自由的。通用公共授权适用于大多数自由软件基金会的软件，以及任何作者指定使用本授权的其它软件。 （有些自由软件基金会的软件，则适用 GNU函式库通用公共授权规定。）您也可以让您的软件适用本授权规定。</div>
<div class="info en-info">The licenses for most software are designed to take away your freedom to share and change it. By contrast, the GNU General Public License is intended to guarantee your freedom to share and change free software-- to make sure the software is free for all its users. This General Public License applies to most of the Free Software Foundation's software and to any other program whose authors commit to using it.
her Free Software Foundation software is covered by the GNU Library General Public License instead.) You can apply it to your programs, too. </div>
<button>Agree</button> <button>Disagree</button>
<br />
</form>
把各語系內容都放上來，預先隱藏，只顯示select選擇的那一項，就可以達到根據選項切換對應語系了，更詳細的原始碼可以看這裡，SelectOptionStyle.html
關於CSS ~ 的應用，可以參考之前寫的文章互動式視窗(checkbox技巧)，不過這個用法還是有所限制，因為CSS選擇器只能向同級或子元素選擇，無法向父元素延伸，所以沒辦法用來改變body背景之類的。另外就是必須在CSS內列舉所有的值，如果是跟業務邏輯相關，有可能不利於維護，比較適合用在純頁面效果，不過相較之下，用javascript實現和這個方法比起來，還是可以少寫不少程式。
參考
木澤的研發腦 
發表迴響