我有这个选择器
[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,我不希望这样。这里有什么问题?
谢谢。
最佳答案
据我所知,[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>
关于html - 通配符选择器工作异常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41208883/