下一个匹配兄弟姐妹的CSS3选择器

Question

I am trying to come up with a CSS3 selector for the below HTML: 我正在尝试为以下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>

All of the elements are siblings, and there might be additional elements where ... are. 所有元素都是同级元素，并且...可能还有其他元素。 The elements in question are always in a sequence of three (3). 有问题的元素始终按三（3）的顺序排列。 Currently, I have CSS as below: 目前，我的CSS如下：

fillpart {
  background: #a5d2a5;
}

It colors the text inside <fillpart> , while the tag itself is obviously ignored, since it is not something that browsers support. 它为<fillpart>的文本<fillpart> ，而标记本身显然被忽略，因为浏览器不支持。 I want to alternate the background value depending on whether previous tag matches input[checked='true'] or false . 我想根据先前的标记是否匹配input[checked='true']或false来替换背景值。

Is this possible with CSS3? CSS3有可能吗？

Thank you 谢谢

Answer 1

To style elements after a checked input-field, you can use the CSS next-selector (+): 要在选中的输入字段之后设置元素的样式，可以使用CSS的下一个选择器（+）：

fillpart {
    background-color: #a5d2a5;
}

input:checked + ignore + fillpart {
    background-color: red;
}

this will make the fillpart after the ignore , after the checked input-field have a red background-color 这将使fillpart在ignore之后，在checked input-field具有红色背景色之后

EDIT: 编辑：

Actually, you can use the ~ -selector, which selects every fillpart element that are preceded by a checked input-field: 实际上，您可以使用~ selector，它选择每个以选中的输入字段为fillpart元素：

fillpart {
    background-color: #a5d2a5;
}

input:checked ~ fillpart {
    background-color: red;
}

Answer 2

You can use plus sign (+) in your selector: 您可以在选择器中使用加号（+）：

input[checked="false"] + ignore + fillpart

view my example below: 查看下面的示例：

 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选择器

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-11-13 08:36:54

解决方案2
1 2017-11-13 08:37:54

下一个匹配兄弟姐妹的CSS3选择器

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-11-13 08:36:54

解决方案2 1 2017-11-13 08:37:54

解决方案1
1 已采纳 2017-11-13 08:36:54

解决方案2
1 2017-11-13 08:37:54