具有嵌套禁用元素的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。这使得一些元素几乎消失而其他元素看起来太暗，这取决于它们的嵌套性和＃34;。

代码可能会禁用项目有几个相互矛盾的原因，这部分原因是有很多禁用嵌套的原因。因此删除所有额外属性将是很多工作，而不是在计划中。我不认为任何花哨的CSS伪选择器可以描述这个，但我可能错了。我们能以某种方式只使最外层或最内层的禁用元素应用不透明度吗？我尝试使用[禁用]：最后一个孩子（或第一个孩子），但似乎没有这样做。

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

Answer 2

selector{
opacity: x;
}

不透明度是继承属性，因此您必须将所有子元素的不透明度设置为1，或者至少为下一个子元素设置为：

[disabled] {
opacity: 0.3;
}
[disabled] > *:not([disabled]){
opacity: 1;
}