选择基于css属性的元素

Question

我想选择具有特定背景颜色的子元素。

例如，我有我的父母#xxx（id），它有很多直接的孩子。我想从这个父母#xxx中选择所有有bakground的孩子：＃000

我搜索了很多但无法找到答案。你可以帮帮我吗？这样的事情（当然不起作用）：

#xxx > div(background:#000) {

}

Answer 1

您无法使用css执行此操作，但您可以使用jquery：

＆＃13;

＆＃13;

$('#xxx div').filter((index, el) => {
  return $(el).css('backgroundColor') == 'rgb(0, 0, 0)'
}).css('color', 'white');

＆＃13;

.a {
  background: red;
}
.b {
  background: green;
}
.c {
  background: blue;
}
.d {
  background: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="xxx">
  <div class="a">a1</div>
  <div class="b">a2</div>
  <div class="c">a3</div>
  <div class="d">a4</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您不想使用JQuery，可以使用CSS3 [attribute*=value] Selector来实现这一目标：

#xxx > div(style*="background:#000")
{
   ...
}

BUT

注意1：请记住，由于属性选择器不支持正则表达式，因此只能执行属性值的完全子字符串匹配。

注意事项2 ：您必须使用内嵌模式样式，否则无效。

我希望能提供帮助：）

Answer 3

据我所知，这是不可能的。

你可以用jQuery做到。

但更好的选择可能是这样的：

.black { background-color: #000000; }
.red { background-color: #ff0000; }
#xxx > .black { padding: 10px; }

Answer 4

有些人说这是不可能的，但有可能。这很有可能。您只需要注意颜色，浏览器（我可以尝试的Chrome和Firefox最新版本）允许基于背景颜色进行选择但是它必须是RGB格式，并且您需要在颜色中使用逗号之后的空格。这将完美地运作：

#xxx[style*="background: rgb(255, 255, 255)"]>div:hover{
    border:10px solid #000000;
}