CSS选择器仅在另一个元素内部选择元素

Question

我有一个关于CSS选择器的问题.如何在<div>具有类名的内部选择具有特定<ul>类名的saft？这个CSS类在别处使用,我不想在任何地方改变样式.

<div id="floater">
    <ul class="saft">
        <li><div class="textSlide"></li>
    </ul>
</div>

Answer 1

只需使用父元素和后代元素之间的CSS后代选择器(空格):

ul.saft div.textSlide {
    /* CSS rules */
}

JS小提琴演示.

在这种情况下,应用于div类的规则textSlide仅在其祖先是ul类的一个时才适用saft.相反,您可以使用直接子组合器,>但是您必须指定与div每个父/祖先相关的直到需要其类的那个,这可能很难维护CSS(在这种情况下不是,但随着时间的推移,它可能会成为问题.