Question

代码：

<div class="mgu-teaser-slide-left mgu-rot">
    <div class="mgu-teaser-slider-bubble">blabla</div>
</div>
or
<div class="mgu-teaser-slide-left mgu-gelb">
    <div class="mgu-teaser-slider-bubble">blabla</div>
</div>

现在我正在寻找一个解决方案，我可以告诉班级mgu-taser-slider-bubble显示某个背景信息，如果＆＃34; mgu-teaser-slide-left和mgu-rot＆＃34 ;或者其他如果＆＃34; mgu-teaser-slide-left和mgu-gelb＆＃34;。我需要这个组合，因为最后它应该显示左或右对齐的背景（将会有另一个类＆＃34; mgu-teaser-slide-right＆＃34;最后）。

我已经尝试过了（这不起作用！）：

.mgu-teaser-slide-left .mgu-rot .mgu-teaser-slider-bubble { background: url('...'); }

感谢您的帮助

Answer 1

试试这个。

由于班级 .mgu-teaser-slide-left .mgu-rot 位于同一元素上，请使用

访问它

.mgu-teaser-slide-left.mgu-rot

.mgu-teaser-slide-left.mgu-rot .mgu-teaser-slider-bubble { 
  background-color: red; 
}

<div class="mgu-teaser-slide-left mgu-rot">
    <div class="mgu-teaser-slider-bubble">blabla</div>
</div>
or
<div class="mgu-teaser-slide-left mgu-gelb">
    <div class="mgu-teaser-slider-bubble">blabla</div>
</div>

Answer 2

它应该像这样工作：

 .mgu-teaser-slide-left.mgu-gelb .mgu-teaser-slider-bubble {
     …
 }

https://jsfiddle.net/ph9ka5c4

Answer 3

连接 AND 的CSS类，并使用逗号为 OR 的多个CSS规则：

.mgu-teaser-slide-left.mgu-rot .mgu-teaser-slider-bubble,
.mgu-teaser-slide-left.mgu-gelb .mgu-teaser-slider-bubble { 
  background: url('...');
}

如果班级和班级显示某些css

3 个答案: