CSS中的附加属性

Question

我知道在vanilla CSS中,没有办法创建"添加"属性.我的意思是:

.shade {
    background: rgba(0,0,0,.1);
}

<div class="shade">I have .1 black background</div>
<div class="shade shade shade">I also have .1 black background, but wouldn't it be cool if i had .3?</div>

我希望做的是避免在循环中生成样式,以便增加背景阴影的不透明度,而不必为每一个指定一个类,因为我不知道有多少.

我怀疑这是不可能的,因为它有点挫败了"CSS"中"C"的目的,这很好 - 但是我觉得如果有人比我更聪明,我会问.

我宁愿不这样做:

<div class="shade">
   <div class="shade">
     <div class="shade">
       No please
     </div>
   </div>
</div> 

Answer 1

您可以使用 JQuery工作示例来做到这一点

$("div").each(function(index){
    var classList = $(this).attr('class').split(/\s+/);
    var num = 0;
    $.each( classList, function(index, item){
        if (item === 'shade') {
            num = num + 0.1;
        }
    })
    $(this).css("background", "rgba(0,0,0," + num + ")");
 });

HTML：

<div class="shade">I have .1 black background</div>
<div class="shade shade other shade">I also have .1 black background, but wouldn't it be cool if i had .3?</div>
<div class="shade shade shade shade shade">0.5 opacity</div>