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

Question

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

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

原文由 RonanC 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

 * {
  margin: 0;
  padding: 0
}

li {
  list-style-type: none;
}

ul.saft div.textSlide {
  background-color: #f90;
  font-weight: #000;
}

 <ul class="saft">
  <li>
    <div class="textSlide">Some text in a textSlide class element</div>
  </li>
</ul>
<div class="textSlide">Some more text, also in a textSlide element</div>

In this case the rules applied to the div of class textSlide will only apply if its ancestor is a ul of the class saft .相反，您可以使用直接子组合子 > 但您必须指定 div 与每个父/祖先相关的，直到需要其类的那个，这给维护 CSS 带来了潜在的困难（在这种情况下并非如此，但随着时间的推移，它可能会成为问题）。

原文由 David Thomas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

做就是了：

ul.saft .textSlide {

这实现了你所需要的

原文由 Andy 发布，翻译遵循 CC BY-SA 3.0 许可协议