我使用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>
答案 0 :(得分:2)
使用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选择器之间。它 仅匹配第二个选择器匹配的那些元素 与第一个匹配的元素的直接子代。