javascript - 具有嵌套禁用元素的 CSS

Question

我参与的一个元素，我注意到禁用的元素看起来不够禁用。我计划用一点 CSS 轻松解决这个问题。

通常，我只是简单地调整不透明度来让它看起来正确。任何具有 disabled 属性的东西都会获得部分不透明度。

[disabled] {
    opacity:0.3;
}

但是，我们的代码中有几个嵌套元素禁用了该属性。像这样:

<div disabled="disabled">
    <p disabled="disabled">
        <input data-val="true" type="checkbox" value="true" disabled="disabled">
        </input>
    </p>
</div>

这是一个简化的例子。其中一些被禁用了更深的级别!

我建议的 CSS 的结果是多次应用不透明度，因此它是 .3*.3*.3=.027。这使得一些元素几乎消失，而另一些元素看起来太暗，这取决于它们的“嵌套”。

代码可能会禁用元素的原因有几个相互矛盾，这也是为什么有这么多禁用嵌套的部分原因。因此，删除所有额外属性将需要大量工作，不在计划内。我不认为任何花哨的 CSS 伪选择器可以描述这一点，但我可能是错的。我们能否以某种方式只让最外层或最内层的禁用元素应用不透明度？我尝试使用 [disabled]:last-child(或 first-child)，但似乎没有用。

CSS 最好，但 Javascript 或 Jquery 也是可能的。

这是一个显示嵌套不透明度结果的屏幕:

Answer 1

您需要按如下方式恢复嵌套的 disabled 元素的不透明度:

.disabled {
    opacity:0.3;
}
.disabled .disabled {
    opacity:1;
}

查看此工作 JSFiddle 示例。

编辑:

同样的想法使用[disabled]。参见 JSFiddle

[disabled] {
    opacity:0.3;
}
[disabled] [disabled] {
    opacity:1;
}