如何仅在另一个元素内选择一个元素？答案

【问题标题】：How do I select an element only when inside another element?如何仅在另一个元素内选择一个元素？
【发布时间】：2021-10-27 19:07:45
【问题描述】：

我有一个关于 CSS 选择器的问题。我如何选择具有特定类名的<div>，仅当它位于类名saft 的<ul> 内？这个 CSS 类在别处使用，我不想到处更改样式。

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

【问题讨论】：

标签： css css-selectors

【解决方案1】：

只需在父元素和后代元素之间使用 CSS 后代选择器（空格）即可：

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

JS Fiddle demo.

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

【讨论】：

感谢您的完美运行...我需要等待几分钟才能接受...但我会的，谢谢您的帮助。
我们可以对 ID 做同样的事情吗？
@Jas：当然，#ancestor #descendant 会选择并设置 id 为“descendant”的元素，如果它是在 id 为“ancestor”的元素中找到的，尽管这是有限的使用，因为 id 在文档中必须是唯一的，并且只有在祖先元素可能以某种方式发生变化时才有帮助。

【解决方案2】：

只要做：

ul.saft .textSlide {

这样就可以满足你的需要

【讨论】：

这个样式是 UL 而不是 div.textslide

【解决方案3】：

您可以轻松地选择具有特定类名的 div，仅当它位于具有类名 saft 的 UL 中时，如下所述 css ：-

ul.saft .textSlide {
color:red;
}

或查看演示：- http://tinkerbin.com/mcrh7iMq

【讨论】：