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

【问题标题】：Can conditional CSS style be based on other CSS style?条件 CSS 样式可以基于其他 CSS 样式吗？
【发布时间】：2015-05-01 17:59:07
【问题描述】：

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

: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";}

【问题讨论】：

【解决方案1】：

我建议你将大纲样式移到类选择器中。

.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>

【讨论】：

【解决方案2】：

这是一个小提琴http://jsfiddle.net/dmbsqzkn/1/

您可以使用 CSS 选择样式属性的唯一方法是样式声明为内联。比如

HTML：

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

CSS：

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

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

【讨论】：