選擇下一個兄弟，只有當這個範圍顯示

我需要給一定的範圍一個特定的顏色，但只有當它的前一個兄弟有「顯示：塊」。我沒有直接訪問HTML，所以這是我可以使用的唯一類。選擇下一個兄弟，只有當這個範圍顯示

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

我有這個遍歷頁面重複，默認情況下隱藏「舊價格」。但有時它有「顯示：塊」。只有當「舊價格」顯示時，我如何才能給「新價格」一個特定的顏色？

來源

2017-03-16 Sergi

，我認爲你需要使用小型的JavaScript這一點。我想不出CSS解決方案。你能展示一些迄今爲止已經嘗試過的東西嗎？ – Lucian

如果'display：block'是一個內聯樣式，那麼在css中可以做到，否則 - 是的，需要javascript（並且可以說這在任何情況下都是不那麼脆弱的選項） – Damon

使用jQuery，查找所有.old-price元素。如果他們有顯示：塊，然後修改他們的兄弟.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>

來源

2017-03-16 19:15:58

簡單的工作對我來說只是添加if語句，但我會選擇它作爲正確的答案，因爲它也會起作用。 – Sergi

AFAIK，你需要JavaScript才能做到這一點。一個簡單的解決方案是添加一個新類，該新類表示.old-price元素是否爲display: block（以下稱爲block）。

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

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

來源

2017-03-16 19:11:01

對不起，我只是編輯原文，我沒有直接訪問HTML。 – Sergi

沒錯，但你可以訪問可以修改HTML元素的JavaScript。 –

選擇下一個兄弟，只有當這個範圍顯示

回答

相關問題