通配符选择器工作奇怪答案

【问题标题】：Wildcard selector working weird通配符选择器工作奇怪
【发布时间】：2016-12-19 03:51:25
【问题描述】：

我有这个选择器

[id^="subf"] {}

它将选择所有 ID 以 subf 开头的元素，好吗？但现在我只想选择这些 DIV 中的直接父 DIV，如下所示：

<div id="subf1">
 <div></div>  <-- this DIV but not the child DIVs inside
 <div></div>  <-- and this DIV but not the child DIVs inside
</div>

所以我用这个：

[id^="subf"] > div {}

或者这个：

[id^="subf"] > div, [id^="subf"] > div + div {}

但它们都不能正常工作，因为：[id^="subf"] > div 似乎也会影响父级“subf1”DIV，我不希望这样。这里有什么问题？

谢谢。

【问题讨论】：

仅使用 `[id^="subf"] div {} 然后 [id^="subf"] div div {} 撤消您想要撤消的任何操作是否适合您的情况？你到底希望完成什么？
这意味着代码加倍。我想为子 DIV 设置绝对位置，但不是为具有 subf ID 的 DIV。
这个问题不清楚。你能举个例子吗？
假设它自己的父级也不匹配属性选择器，选择器不可能影响父级 div。缺了点什么。也许向我们展示样式声明以及选择器。
@CainNuke 是你的#subf1 元素包含在另一个元素中，id 以“subf”开头？

标签： html css css-selectors

【解决方案1】：

据我所知，[id^="subf"] > div 似乎工作正常。

这是一个示例，其中只有[id^="subf"] 的直系子级应用了黄色background-color 和border-radius：

[id^="subf"] {
display: block;
float: left;
width: 200px;
height: 200px;
margin: 6px;
background-color: rgb(255,0,0);
}

[id^="subf"] div {
display: block;
float: left;
width: calc(50% - 12px);
height: calc(50% - 12px);
margin: 6px;
background-color: rgb(0,0,255);
}

[id^="subf"] > div {
background-color: rgb(255,255,0);
border-radius: 50%;
}

<div id="subf1">

<div>
<div></div>
<div></div>
</div>  <!-- this DIV but not the child DIVs inside -->

<div>
<div></div>
<div></div>
</div>  <!-- and this DIV but not the child DIVs inside -->

</div>

<div id="subf2">

<div>
<div></div>
<div></div>
</div>  <!-- this DIV but not the child DIVs inside -->

<div>
<div></div>
<div></div>
</div>  <!-- and this DIV but not the child DIVs inside -->

</div>

【讨论】：

是的，在你的例子中它工作得很好，这就是为什么我不明白为什么它不会在我的身上。