html - 通配符选择器工作异常

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^="subf"] > div 似乎也会影响父“subf1”DIV，我不希望这样。这里有什么问题？

谢谢。

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