选择具有特定背景颜色的元素

时间:2021-09-15 11:17:24

I want to select a bunch of spans in a div whose CSS contains a particular background color. How do I achieve this?

我想在div中选择一组span,它的CSS包含特定的背景色。我如何做到这一点?

2 个解决方案

#1


41  

if i understand the question correctly, the selector [attribute=value] will not work because <span> does not contain an attribute "background-color". you can test that out quickly to confirm it won't match anything:

如果我理解正确,选择器[attribute=value]将不会工作,因为不包含属性“background-color”。你可以快速测试,以确定它不会匹配任何东西:

$('#someDiv span[background-color]').size(); // returns 0

given:

考虑到:

// css
.one, .two {
  background-color: black;
}

.three {
  background-color: red;
}

// html
<div id="someDiv">
    <span class="one">test one</span>
    <span class="two">test two</span>
    <span class="three">test three</span>
</div>

here's a snippet that will work:

下面是一个有用的片段:

$('div#someDiv span').filter(function() {
    var match = 'rgb(0, 0, 0)'; // match background-color: black
    /*
        true = keep this element in our wrapped set
        false = remove this element from our wrapped set
                                                         */
    return ( $(this).css('background-color') == match );

}).css('background-color', 'green'); // change background color of all black spans

#2


-7  

Use the attribute selector [attribute=value] to look for a certain attribute value.

使用属性选择器[attribute=value]查找某个属性值。

#id_of_the_div span[background-color=rgb(255,255,255)]

#1


41  

if i understand the question correctly, the selector [attribute=value] will not work because <span> does not contain an attribute "background-color". you can test that out quickly to confirm it won't match anything:

如果我理解正确,选择器[attribute=value]将不会工作,因为不包含属性“background-color”。你可以快速测试,以确定它不会匹配任何东西:

$('#someDiv span[background-color]').size(); // returns 0

given:

考虑到:

// css
.one, .two {
  background-color: black;
}

.three {
  background-color: red;
}

// html
<div id="someDiv">
    <span class="one">test one</span>
    <span class="two">test two</span>
    <span class="three">test three</span>
</div>

here's a snippet that will work:

下面是一个有用的片段:

$('div#someDiv span').filter(function() {
    var match = 'rgb(0, 0, 0)'; // match background-color: black
    /*
        true = keep this element in our wrapped set
        false = remove this element from our wrapped set
                                                         */
    return ( $(this).css('background-color') == match );

}).css('background-color', 'green'); // change background color of all black spans

#2


-7  

Use the attribute selector [attribute=value] to look for a certain attribute value.

使用属性选择器[attribute=value]查找某个属性值。

#id_of_the_div span[background-color=rgb(255,255,255)]