僅 CSS 條件切換

Question

 *, *::after { box-sizing: border-box; transition-property: all; transition-duration: 0.5s; } html, body { margin: 0; font-family: Arial; text-transform: capitalize; } input { display: none; } hr, label, label::after { display: block; width: 6rem; height: 6rem; border-style: none; background-color: #444; border-radius: 1rem; } div, section { display: flex; justify-content: center; align-items: center; margin: 0 1rem; } label, label::after { position: relative; width: 3rem; height: 2rem; margin: 1rem; background-color: #eee; content: ''; }

 <style> label { cursor: pointer; } label::after { transform: scale( 0.6 ); left: 0rem; width: 2rem; margin: 0; background-color: #fff; } label:hover { background-color: #ddd; } #blue:checked ~ div [ for='blue' ], #red:checked ~ div [ for='red' ] { background-color: #222; } #blue:checked ~ div [ for='blue' ]::after, #red:checked ~ div [ for='red' ]::after { left: 1rem; } #blue:checked ~ div [ for='blue' ]:hover, #red:checked ~ div [ for='red' ]:hover { background-color: #000; } #blue:checked ~ hr { background-color: #0be; } #red:checked ~ hr { background-color: #d02; } </style> <input type='checkbox' id='blue'> <input type='checkbox' id='red'> <hr> <div> <section> <h2>blue</h2> <label for='blue'></label> </section> <section> <h2>red</h2> <label for='red'></label> </section> </div>

復選框 hack可用於創建僅 CSS 的切換，如下面的開/關開關所示。 此功能可以擴展到文檔中的其他元素，利用 ~ 兄弟選擇器，當下面的框根據是否選中開關更改顏色時會發生什么。

問題是：如果兩個切換都被選中，有沒有辦法讓 CSS 將框着色為紫色？

這似乎是一種條件問題，例如如果只選中第一個框，然后正常着色，但是如果同時選中兩個框，則為框着色。

也許只有當兩個開關都打開時，使用幾種疊加和混合模式才能使框變成紫色？ 我正在尋找僅使用 CSS 的解決方案。 任何幫助深表感謝。

Answer 1

是的，通過分配#blue:checked ~ #red:checked ~ hr { background-color: #d2d; } #blue:checked ~ #red:checked ~ hr { background-color: #d2d; } . 請注意，CSS 順序必須遵循 HTML 文檔中輸入的順序：

 *, *::after { box-sizing: border-box; transition-property: all; transition-duration: 0.5s; } html, body { margin: 0; font-family: Arial; text-transform: capitalize; } input { display: none; } hr, label, label::after { display: block; width: 6rem; height: 6rem; border-style: none; background-color: #444; border-radius: 1rem; } div, section { display: flex; justify-content: center; align-items: center; margin: 0 1rem; } label, label::after { position: relative; width: 3rem; height: 2rem; margin: 1rem; background-color: #eee; content: ''; }

 <style> label::after { transform: scale( 0.6 ); left: 0rem; width: 2rem; margin: 0; background-color: #fff; } label:hover { background-color: #ddd; } #blue:checked ~ div [ for='blue' ], #red:checked ~ div [ for='red' ] { background-color: #222; } #blue:checked ~ div [ for='blue' ]::after, #red:checked ~ div [ for='red' ]::after { left: 1rem; } #blue:checked ~ div [ for='blue' ]:hover, #red:checked ~ div [ for='red' ]:hover { background-color: #000; } #blue:checked ~ hr { background-color: #0be; } #red:checked ~ hr { background-color: #d02; } #blue:checked ~ #red:checked ~ hr { background-color: #d2d; } </style> <input type='checkbox' id='blue'> <input type='checkbox' id='red'> <hr> <div> <section> <h2>blue</h2> <label for='blue'></label> </section> <section> <h2>red</h2> <label for='red'></label> </section> </div>