在 Css 中，如何选择父级为“X”类的 div 的跨度标签的类？答案

【问题标题】：In Css, how to select class of a span tag which parent is a div with class "X"?在 Css 中，如何选择父级为“X”类的 div 的跨度标签的类？
【发布时间】：2017-08-23 02:27:06
【问题描述】：

我正在处理一个复杂的问题，我确实想更改这段代码的css：

<div class="et_pb_module et-waypoint et_pb_image et_pb_animation_left circular et_pb_image_2 et_always_center_on_mobile et_pb_has_overlay">
<a href="https:/....ee/?page_id=460"><img src="https://..../wp-content/uploads/2017/00565531_813167153_o.jpg" alt="" />
<span class="et_overlay"></span></a>
</div>

我需要更改 et_overlay 类，我特别想更改 span 标记的此类，其父级是 div 和 circular 类，在这段代码中就是这种情况。（代码的其他一些部分具有相同的配置，但没有 circular 类，我不想更改这些部分）

我检查了不同的 CSS 选择器，但找不到适合我需要的选择器。

有什么想法吗？

非常感谢

【问题讨论】：

DIV.circular > span.et_overlay?

标签： html css css-selectors

【解决方案1】：

使用.circular span.et_overlay（注意空格） - 参见下面的演示：

.circular span.et_overlay {
  color: red;
}

<div class="et_pb_module et-waypoint et_pb_image et_pb_animation_left circular et_pb_image_2 et_always_center_on_mobile et_pb_has_overlay">
  <a href="https:/....ee/?page_id=460"><img src="https://..../wp-content/uploads/2017/00565531_813167153_o.jpg" alt="" />
    <span class="et_overlay">hello</span></a>
</div>

<div class="et_pb_module et-waypoint et_pb_image et_pb_animation_left et_pb_image_2 et_always_center_on_mobile et_pb_has_overlay">
  <a href="https:/....ee/?page_id=460"><img src="https://..../wp-content/uploads/2017/00565531_813167153_o.jpg" alt="" />
    <span class="et_overlay">hello</span></a>
</div>

【讨论】：