Question

我需要给特定的跨度一个特定的颜色，但只有当它的前一个兄弟有“display：block”时。我无法直接访问HTML，因此这是我可以使用的唯一类。

<div class="price-content">
  <span class="old-price">
  **<span class="new-price>**
  <span class="percentage">
</div>

我在整个页面上都有这个，“旧价格”默认是隐藏的。但有时它有“显示：阻止”。如果只显示“旧价格”，我怎样才能给“新价格”一种特定的颜色？

Answer 1

AFAIK，你需要JavaScript才能做到这一点。一个简单的解决方案是添加一个新类，表示.old-price元素是display: block（下面称为block）。

＆＃13;

.old-price.block + .new-price {
  color: red;
}

＆＃13;

<div class="price-content">
  <span class="old-price block">OLD PRICE</span>
  <span class="new-price">NEW PRICE</span>
  <span class="percentage">%</span>
</div>

＆＃13;

Answer 2

使用jQuery，查找所有.old-price元素。如果他们有display：block，那么修改他们的兄弟.new-price元素。这是一个例子：

$(document).ready(function() {
  $.each($('.price-content > .old-price'), function(i, el) {
    $oldPrice = $(el);
    
    if ($oldPrice.css('display') === 'block') {
      $oldPrice.next('.new-price').css('color', 'purple');
      // Or maybe do 'addClass' for semantic's sake
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price-content">
  <span class="old-price" style="display: none">$5.98</span>
  <span class="new-price">$5.15</span>
  <span class="percentage">14%</span>
</div>

<hr />

<div class="price-content">
  <span class="old-price" style="display: block">$5.98</span>
  <span class="new-price">$5.15</span>
  <span class="percentage">14%</span>
</div>

仅在显示此范围时选择下一个兄弟

2 个答案: