带孩子的css id通配符选择器

Question

我不知道如何解释这个,但我有以下情况.我有很多div,其ID以"row"开头,例如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为红色.

小提琴

有关属性选择器的更多信息 - 请查看规范

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

要检查此项,请右键单击其中一个.element类上的"检查元素",并查看属性选择器规则是否被更具体的规则划掉/覆盖.