条件 CSS 样式可以基于其他 CSS 样式吗？

Question

我的复选框在选中时会更改标签颜色。它在我的样式表中定义如下：

:checked + label {color: white;}

但是，我的某些复选框具有轮廓样式。

outline = "1px solid"

我希望将这些勾勒出轮廓的复选框更改为蓝色而不是白色。

:checked (AND CHECKBOX HAS OUTLINE) + label {color: blue;}

有没有办法在我的样式表中执行此操作？

PS: 大纲已应用于具有 javascript 功能的特定复选框。

if (n !== -1) {
 document.getElementById(id).style.outline = "1px solid";}

Answer 1

您可以将 CSS 用于 select 样式属性的唯一方法是将样式声明为内联。例如

HTML:

<input type="checkbox" style="outline: '1px solid';"></input>

CSS:

input:checked[style="outline: '1px solid';"] + label
{
  color: blue;
}

显然内联样式不受欢迎，因为它们会混淆您的代码并在以后对样式进行调整很痛苦。这是使用 CSS 可以做到的唯一方法。将单独的 class 应用于这些元素很可能更容易、更正确。

请参阅此 post Advanced CSS Selector - Select based on styling 了解更多信息。

Answer 2

我建议您将大纲样式移动到 class 选择器中。

.outline {
    outline: 1px solid;
}
:checked + label {
    color: red;
}
.outline:checked + label {
    color: green;
}

<input type="checkbox" class="outline"/><label>green</label>
<input type="checkbox"/><label>red</label>

Can conditional CSS style be based on other CSS style?