如何解决选择元素而不选择后代
我使用CSS模块为我的标签生成随机的类名。如何选择特定类型的元素而不选择后代?到目前为止,我已经尝试像这样使用选择器:first-of-type
和:first-child
:
.settings ul:first-of-type > i:first-child {
opacity: 0.5;
}
但是结果是我的规则适用于页面上的每个<i>
元素。
HTML:
<div class="settings">
<ul>
<li>
<i>Select this element</i>
<ul>
<li>
<i>but not this one</i>
<span></span>
</li>
<li>
<i>or not this one</i>
<span></span>
</li>
</ul>
</li>
</ul>
</div>
解决方法
使用CSS子组合器>
:
.settings > ul > li > i {
opacity: 0.5;
}
<div class="settings">
<ul>
<li>
<i>Select this element</i>
<ul>
<li>
<i>but not this one</i>
<span></span>
</li>
<li>
<i>or not this one</i>
<span></span>
</li>
</ul>
</li>
</ul>
</div>
子组合器(
>
)放在两个CSS选择器之间。它 仅匹配第二个选择器匹配的那些元素 与第一个匹配的元素的直接子代。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。