下一個匹配兄弟姐妹的CSS3選擇器
[英]CSS3 selector for next matching sibling
問題描述
我正在嘗試為以下HTML提供CSS3選擇器：
<input data-type="fillpart" type="checkbox" name="cough, " checked="true">
<ignore></ignore>
<fillpart explicitlyset="true" name="cough, ">cough, </fillpart>
...
<input data-type="fillpart" type="checkbox" name=“fever, " checked="true">
<ignore></ignore>
<fillpart explicitlyset="true" name=“fever, ">fever, </fillpart>
...
<input data-type="fillpart" type="checkbox" name=“flu, " checked="true">
<ignore></ignore>
<fillpart explicitlyset="true" name=“flu, ">flue, </fillpart>
所有元素都是同級元素，並且...可能還有其他元素。 有問題的元素始終按三（3）的順序排列。 目前，我的CSS如下：
fillpart {
background: #a5d2a5;
}
它為<fillpart>的文本<fillpart> ，而標記本身顯然被忽略，因為瀏覽器不支持。 我想根據先前的標記是否匹配input[checked='true']或false來替換背景值。
CSS3有可能嗎？
謝謝
2 個解決方案
解決方案1
1 已采納 2017-11-13 08:36:54
要在選中的輸入字段之后設置元素的樣式，可以使用CSS的下一個選擇器（+）：
fillpart {
background-color: #a5d2a5;
}
input:checked + ignore + fillpart {
background-color: red;
}
這將使fillpart在ignore之后，在checked input-field具有紅色背景色之后
編輯：
實際上，您可以使用~ selector，它選擇每個以選中的輸入字段為fillpart元素：
fillpart {
background-color: #a5d2a5;
}
input:checked ~ fillpart {
background-color: red;
}
解決方案2
1 2017-11-13 08:37:54
您可以在選擇器中使用加號（+）：
input[checked="false"] + ignore + fillpart
查看下面的示例：
fillpart {background: #a5d2a5;} input[checked="false"] +ignore+ fillpart{background: red;}
<!DOCTYPE html> <html> <body> <input data-type="fillpart" type="checkbox" name="cough, " checked="true"> <ignore></ignore> <fillpart explicitlyset="true" name="cough, ">cough, </fillpart> ... <input data-type="fillpart" type="checkbox" name=“fever, " checked="false"> <ignore></ignore> <fillpart explicitlyset="true" name=“fever, ">fever, </fillpart> ... <input data-type="fillpart" type="checkbox" name=“flu, " checked="true"> <ignore></ignore> <fillpart explicitlyset="true" name=“flu, ">flue, </fillpart> </body> </html>
如果選擇器不再匹配，如何將 CSS3 動畫運行到最后？
[英]How to run the CSS3 animation to the end if the selector is not matching anymore?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.