javascript - 两个不同 div 的 CSS 选择器

Question

我想知道如果另一个 div 包含一个特定的类，是否可以设置一个 div 的样式？!我知道这可以用 jQuery 来完成，但我想知道它是否也可以用 CSS 来完成。

假设我有

<div class="stickyWrap sticky"></div>
<div class="checkout "></div>

当 stickWrap 包含类 sticky 时，是否可以设置 checkout 的样式？

我试过类似的方法:

.stickyWrap[class*="sticky"] + .checkout{
  background-color: #1f6053; 
}

那显然是行不通的。

Answer 1

只需在选择器中链接类名即可。

.stickyWrap.sticky + .checkout {
  background:red;
}

<div class="stickyWrap">not sticky</div>
<div class="checkout ">checkout</div>

<div class="stickyWrap sticky">sticky</div>
<div class="checkout ">checkout</div>

注意:我认为您真正想要的选择器是:

.stickyWrap[class$="sticky"] + .checkout{
  background-color: #1f6053; 
}

这将找到同时具有 .stickyWrap 和 以“sticky”结尾的类的父元素...否则它太宽泛了。

JSfiddle Demo