通配符选择器工作异常
通配符选择器工作异常
提问于 2016-12-18 21:41:12
我有这个选择器
[id^="subf"] {}它将选择ID以subf开头的所有元素，好吗？但现在我只想选择这些DIVs中的直接父DIVs，如下所示：
<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 {}但它们都不能很好地工作，因为: div“subf”> DIV似乎也会影响父"subf1“id^=，我不希望这样。这里出了什么问题？
谢谢。
回答 1
Stack Overflow用户
发布于 2016-12-19 03:51:25
据我所知，[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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41208883
复制相关文章
相似问题
腾讯云开发者
