如何从这个 css 类选择器声明中干燥（删除冗余）？

【问题标题】：how to DRY up (remove redundancy) from this css class selector declaration?如何从这个 css 类选择器声明中干燥（删除冗余）？
【发布时间】：2011-10-14 06:15:14
【问题描述】：

我有：

    .sketch_img_thumb_box .title{
      opacity: 0.1;
    }
    .sketch_img_thumb_box:hover .title{
      opacity: 1;
    }

    .sketch_img_thumb_box .artist{
      opacity: 0.1;
    }
    .sketch_img_thumb_box:hover .artist{
      opacity: 1;
    }


    .sketch_img_thumb_box .rating_bar {
      opacity: 0.1;
    }
    .sketch_img_thumb_box:hover .rating_bar  {
      opacity: 1;
    }

我把它归结为：

  .sketch_img_thumb_box .title, .sketch_img_thumb_box .artist, .sketch_img_thumb_box .rating_bar{
     opacity: 0.1;
 }
  .sketch_img_thumb_box:hover .title, .sketch_img_thumb_box:hover .artist,   .sketch_img_thumb_box:hover .rating_bar{
    opacity: 1;
}

我们可以进一步优化吗？

【问题讨论】：

向我们展示 html 以了解如何最好地解决这个问题...

标签： css optimization dry redundancy

【解决方案1】：

这样写

css:

.sketch_img_thumb_box{
         opacity: 0.1;
     }
    .sketch_img_thumb_box:hover{
         opacity: 1;
     }

html:

<div class="sketch_img_thumb_box">
  <div class="title"></div>
  <div class="artist"></div>
  <div class="rating_bar"></div>
</div>

因为如果你给opacity parent 那么children 会自动获得不透明度。

检查小提琴http://jsfiddle.net/sandeep/axuxT/4/

& 如果还有其他 children 你不想给 opacity 然后写这个：

.no_bar{width:50px;height:50px;margin:5px;}
.sketch_img_thumb_box > *{opacity:0.1;display:inline-block;}
.sketch_img_thumb_box:hover > *{opacity:1}
.no_bar{background:black;opacity:1}

检查小提琴http://jsfiddle.net/sandeep/RqP6p/

【讨论】：