html - 下一个匹配兄弟的 CSS3 选择器

Question

我正在尝试为以下 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> ，而标签本身显然被忽略了，因为浏览器不支持它。我想根据之前的标签是否匹配 input[checked='true'] 来改变背景值或 false .

这可以用 CSS3 实现吗？

谢谢

Answer 1

要在选中的输入字段后设置元素样式，您可以使用 CSS 下一个选择器 (+):

fillpart {
    background-color: #a5d2a5;
}

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

这将使 ignore 之后的 fillpart，在 checked input-field 之后具有红色背景色

编辑:

实际上，您可以使用 ~ 选择器，它会选择前面带有选中输入字段的每个 fillpart 元素:

fillpart {
    background-color: #a5d2a5;
}

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