CSS 样式的参考嵌套 DIV

Question

使用 Elementor 我有一个当前的 HTML 结构，如下所示；

<div class="carousel-post">
    <div class="elementor-element-overlay">
        <div class="elementor-widget-container">
            <div class="elementor-posts-container">
            </div>
        </div>
    </div>
</div>

我需要引用“elementor-posts-container”类，因此，我添加了“carousel-post”类。

在我的CSS中，我想将“elementor-posts-container”显示为FLEX，但是，只有这个位于“carousel-post”下的DIV。

CSS

.carousel-post, .elementor-posts-container

上面的内容有效，但针对所有 .elementor-posts-container

Answer 1

***** 只是一个解释 *****

添加此作为答案，因为我无法添加格式。

应该是

.carousel-post .elementor-posts-container

. Remove the comma.

1. 当代码为

   .carousel-post, .elementor-posts-container

   时，带有逗号（,）这意味着匹配两者中的任何一个。

2. 当您删除逗号 (,) 时，表示匹配父级中的子级。 -->>> 这将符合您的用例

3. 要获得直接父子关系的直接匹配（当您将来需要它时），请执行

   .carousel -帖子> .elementor-posts-container

   。这将直接匹配“.carousel-post”中的所有“.elementor-posts-container”div。

***** 编辑 *****

这不起作用：

.carousel-post .elementor-posts-container{
    display: flex;
}

上面的代码意味着，“.carousel-post”内的所有“.elementor-posts-container”应该是“display flex”。