Question

我想简化我的代码，我想知道是否有一种方法可以告诉CSS根据父级属性是它的子元素。

（也许这句话太宽泛了，下面您可以更具体地看到我要完成的工作）

#blueBtn {
    background-color: #00f;
    color: white;
    border-color: #00f;
}

#blueBtn:disabled {
    background-color: #33f;
    color: gray;
    border-color: #33f;
}

#greenBtn {
    background-color: #0f0;
    color: white;
    border-color: #0f0;
}

#greenBtn:disabled {
    background-color: #393;
    color: #aaa;
    border-color: #393;
}

我想要一种在启用按钮后向每个3进行加 0的方法。例如，如果我有一个redBtn，它的颜色将是#f00，而禁用时的颜色是#f33。

这样，我只需一个选择器（button.disabled）即可影响任何颜色按钮。

Answer 1

根据父母的属性影响其子元素

这就是CSS的工作方式（级联样式表）。但是，您要尝试获得的是实际价值。所以不，不是直接按照您的思维方式进行的（因为可以访问计算值）。有几种解决方法，但是一种解决方案是利用变量。这不适用于所有属性值对，但我认为这种情况非常合适。我所做的就是拒绝降低其hsl值的亮度：

.redBtn {
    --color: 0;
    background-color: hsl(var(--color), 100%, 50%);
}

.blueBtn {
    --color: 255;
    background-color: hsl(var(--color), 100%, 50%);
}

.greenBtn {
    --color: 100;
    background-color: hsl(var(--color), 100%, 50%);
}


[disabled] {
    background-color: hsl(var(--color),100%, 30%);
    color: #aaa;
}





button { width: 150px; height: 75px; color: white; }
button:active { border: 3px solid cornflowerblue; }

<button class="redBtn" disabled>Disabled Red Button</button>
<button class="blueBtn" >Blue Button</button>
<button class="greenBtn" >Green Button</button>
<button class="greenBtn" disabled>Disabled Grn Button</button>
<button class="redBtn" >Red Button</button>
<button class="blueBtn" disabled>Disabled Blue Button</button>
<button class="redBtn" disabled>Disabled Red Button</button>
<button class="blueBtn" disabled>Disabled Blue Button</button>
<button class="redBtn" >Red Button</button>
<button class="greenBtn" disabled>Disabled Grn Button</button>
<button class="greenBtn" >Green Button</button>
<button class="blueBtn" >Blue Button</button>

编辑：不确定跨浏览器的兼容性如何，一如既往地检查IE：）

有没有一种方法可以根据CSS上现有元素的样式来设置其样式？

1 个答案: