带有 child 的 css id 通配符选择器

Question

我不知道该如何解释，但我有以下情况。我有许多 ID 以“行”开头的 div，例如 row1、row2 等。它们都包含另一个 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 是红色的。

FIDDLE

有关属性选择器的更多信息 - 查看 the spec

---

如果我猜为什么这对你不起作用，我会说这个问题与特异性有关。

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