Question

我在页面上有很多相同的元素不在我的直接控制之下（所以我无法更改HTML）。这可能如下所示：

<div class="item">This text should be black</div>
<div class="item" id="brand_one">This text should be red</div>
<div class="item" id="brand_two">This text should be red</div>
...
<div class="item">This text should be black</div>

我想编写一个css规则，定位所有元素，其中 item 具有id。

我能做到

#brand_one, #brand_two, ... { color:red; }

但身份证进入数百人，所以这不是一个选择。

我正在寻找的是这样的规则：

.item[id] { color:red; } / .item# { color:red; }

我知道这在Javascript中是可行的，但这是否存在于CSS？

Answer 1

是的，可以使用CSS attribute selectors：

class

Answer 2

是的，这存在。在你的情况下你应该使用：

div[id*="brand"]  { color: red; }

这会选择ID为div的所有brand，并将其标记为红色。

修改：您还可以确保它仅定位id - 名称开头brand_的{{1}}，请使用以下内容：

id

这样可以避免将来包含div[id^="brand_"] { color: red; }的{{1}}的其他div作为目标。

编辑2：为了使其更加具体，您只能定位id后面的brand：

id

这会定位class="item"开头的所有div[id^="brand_"].item { color: red; } div，brand_为id。

Answer 3

您可以尝试使用css属性选择器：

div.item {
  color: black;
}
div.item[id^='brand_'] {
  color: red;
}
div.code {
  text-transform: uppercase;
}
div.code[id^='brand_'] {
  color: blue;
}

<div class="item">This text should be black</div>
<div class="item" id="brand_one">This text should be red</div>
<div class="item" id="brand_two">This text should be red</div>
<div class="item">This text should be black</div>
<div class="code">This text should be in caps</div>
<div class="code" id="brand_three">This text should be in caps and blue color</div>

此处，[id^='brand_']是指以id开头的brand_。还有$（以...结尾）和*（包含）表达式。

Answer 4

CSS [attribute ^ = value]选择器

[attribute ^ = value]选择器用于选择属性值以指定值开头的元素。

所以在你的情况下;

<style>
 [id^="brand"] {
   color:red;
 }
<style>

参考：

w3schools

Try it yourself

Answer 5

我们可以使用

.item[id^="brand"]{
    color:red;
}

^ =表示＆＃34;以＆＃34;开头。因此，我们可以搜索以＆＃34;品牌＆＃34;。

开头的ID

Answer 6

这是另一种方法。

<style type="text/css">
    .item:not([id='']) {
        color:red;
    }
</style>

但它假设您可以设置id =＆＃39;＆＃39;：

<div class="item" id="">This text should be black</div>

在您的情况下未指定ID时，不确定这是如何工作的。

CSS可以找到具有任何ID的元素吗？

6 个答案: