多个两个-类 css-选择器？

Question

我试图理解 CSS 中的多个 class 选择器：

这是我的出发点：

<div class="content-wrapper layout-TILE">
   <div class="content draggable>           /* draggable is added/removed dynamically */
       <img class="some-image-class">
    </div>
</div>

<div class="content-wrapper layout-LIST">
   <div class="content draggable>           /* draggable is added/removed dynamically */
       <img class="some-image-class">
    </div>
</div>

img大小通常只取决于.content-wrapper和.layout-XXX，例如：

.content-wrapper.layout-LIST .some-image-class {
  height: 20px;
  width: 150px;
}

.content-wrapper.layout-TILE .some-image-class {
  height: 50px;
  width: 50px;
}

但是当.draggable添加到.content时，我如何为两个class这样的条件制定组合选择器：

.content-wrapper.layout-TILE AND .content.draggable .some-image-class {
  height: 2px;
  width: 15px;
}

.content-wrapper.layout-LIST AND .content.draggable .some-image-class {
  height: 5px;
  width: 5px;
}

提前致谢

克里斯

Answer 1

认为你可以使用：

.content-wrapper.layout-TILE .draggable .some-image-class {
  height: 2px;
  width: 15px;
}

.content-wrapper.layout-LIST .draggable .some-image-class {
  height: 5px;
  width: 5px;
}

这样只有在添加 .draggable 类名时才会应用这些样式。

Answer 2

.content-wrapper.layout-TILE .content.draggable .some-image-class {
  height: 2px;
  width: 15px;
}

.content-wrapper.layout-LIST .content.draggable .some-image-class {
  height: 5px;
  width: 5px;
}

（不要忘记图像 class 的圆点并注意空格的使用）

或者，更具体（对于直接后代关系）：

.content-wrapper.layout-TILE > .content.draggable > .some-image-class {
  height: 2px;
  width: 15px;
}

.content-wrapper.layout-LIST > .content.draggable > .some-image-class {
  height: 5px;
  width: 5px;
}

多个两个-类 css-选择器？

Multiple two-classes css-selector?

css

css-selectors

multiple-conditions