Question

我遇到这种情况：

<div class="price">
    <del><span class="amount">100</span></del>
    <ins><span class="amount">1000</span></ins>
</div>

<div class="price">
    <span class="amount">1000</span>
</div>

我想只为其中有1000个的跨度着色。怎么做？我尝试过伪选择但没有运气。

编辑：解决方案：

.price ins .amount, 
.price > .amount{
    color:red;
}

Answer 1

您不能使用CSS来评估元素的内容。你需要使用javascript。

您可以使用此javascript来执行此操作。

var amountEls = document.getElementsByClassName('amount');

for (var i = 0; i < amountEls.length; i++) {
    var amount = amountEls[i];
    if (amount.innerHTML.indexOf('1000') > -1) {
        amount.style.background = 'yellow';
    }
}

请参阅此fiddle - 如果您希望文字改变颜色而不是背景，只需将background更改为color。

编辑 - 如果这些元素的位置始终是静态的，并且您不定位数字 - 只是第二个和第三个{ {1}}'span' - 然后您可以使用：

.amount

.price ins .amount, .price + .price .amount { background: yellow; }运算符是相邻的兄弟选择器，在此实例中选择前面带有+

的任何.price .amount

Answer 2

你可以在加载时使用jQuery（或简单的javascript）颜色，如下所示：

$(document).ready(function({
    $(".amount").each(function(){
        if(parseInt($(this).html()) >= 1000){
            $(this).css('color', 'green');
        }
    });
}));

Answer 3

你可以试试这个：

<强> CSS：

.price span.amount{color:green;}
.price del span.amount{color:initial;}

演示：http://jsfiddle.net/lotusgodkk/GCu2D/334/

Answer 4

<div class="price">
    <del><span class="amount">100</span></del>
    <ins><span class="amount hlt_txt">1000</span></ins>
</div>
<div class="price">
    <span class="amount hlt_txt">1000</span>
</div>

和你的CSS

    .hlt_txt{color:green;}

选择具有相似类别的元素

4 个答案: