条件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

这是一个小提琴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做到这一点的唯一方法。如果将单独的类应用于这些元素，那么统一更容易也更正确。

请参阅此帖子Advanced CSS Selector - Select based on styling了解详情。

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;