css - 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 Working example

$("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>