带有子项的 CSS ID 通配符选择器

Question

我不知道如何解释这一点，但我有以下情况。我有很多div 的 ID 以"行"开头，例如 row1、row2 等。它们都包含另一个div，该div具有一个名为"element"的类。我想做的是为所有这些"元素"div创建一个规则，所以我写了这样的东西：

[id*="row"] .element {width:0;}

我的 html 是这样的：

<div id="row1">
 <div class="element"></div>
</div>
<div id="row2">
 <div class="element"></div>
</div>
<div id="row3">
 <div class="element"></div>
</div>
and so on...

它没有用。你能告诉我怎么了吗？顺便说一句，我不能只为"元素"添加规则，因为其他具有不同 ID 的div 内部也有"元素"并且应该具有不同的样式。

Answer 1

实际上你的代码工作正常。

看看这个：

<div id="row3">
 <div class="element">three</div>
</div>
<div id="notARow">
 <div class="element">three</div>
</div>

跟

[id*="row"] .element {color: red}

.. 并注意 ID 的 with row 是红色的。

小提琴

有关属性选择的更多信息 - 查看规范<小时 />如果我猜为什么这对你不起作用，我会说这个问题与特异性有关。

要检查这一点，请右键单击其中一个 .element 类上的"检查元素"，然后查看您的属性选择器规则是否被更具体的规则划掉/覆盖。

Answer 2

您可以使用

.element选择它们。 此外，应该在那些rowdiv上使用类，那么你不需要按ID选择。

这样：

<div id="1" class="row">
    <div class="element"></div?
</div>

依此类推，选择为：

.row .element {
}

除了

.element之外，您只需要包含一些内容，如果与您不想选择的页面上的该类存在冲突的元素。

如果这些是唯一的，请改用这个：

.elements {
}