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为红色。

<强> FIDDLE

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

<小时/> 如果我猜到为什么这对你不起作用，我会说问题与特异性有关。

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

Answer 2

您只需使用.element选择它们即可。此外，应该在row div上使用class，然后您不需要按ID进行选择。

像这样：

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

等等被选为：

.row .element {
}

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

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

.elements {
}

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

2 个答案: