通配符选择器工作奇怪

Question

我有这个选择器

[id^="subf"] {}

将选择ID以subf开头的所有元素，好吗？ 但是现在我想在这些DIV中只选择直接的PARENT 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 ^ =＆＃34; subf＆＃34;]＆gt; div似乎影响了父母＆＃34; subf1＆＃34; DIV也是，我不想那样。这有什么不对？

谢谢。

Answer 1

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

以下是仅[id^="subf"]的直系子女申请黄色background-color和border-radius的示例：

＆＃13;

＆＃13;

[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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;