css - 两个相似的 div 元素一个带有一个附加类如何覆盖降序元素的颜色？

Question

第一个 div 看起来像这样

<div class="item ui-droppable  feed masonry-brick">

第二个有一个额外的小班

我想在类选择器较小时修改降序元素并将颜色更改为黑色/这些项目的属性。

我尝试了以下但没有成功：

 .item .more .deliverytype {
    color: red;
    display: inline;
    font-size: 20px;
    font-weight: 500;
    position: absolute;
    right: 7px;
    text-align: right;
    top: 54px;
}


  .small .deliverytype {
    color: black;important!

}

在这里提琴

Answer 1

只是更具体 - 不需要!important，只需使用.small.item.

.small.item .more .deliverytype {
    color: black;
}

jsFiddle 这里- 它的工作原理。

由于color:red是通过设置的.item .more .deliverytype，你只需要添加.small。因此，如果父级同时包含.small和.item( .small.item)，它将设置为 ..deliverytype的后代的样式.more。