html - 如何为 CSS 规则选择元素的曾孙？

Question

鉴于此 HTML，如何选择 rt-block 来更改 CSS 仅当嵌套在 rt-header 中时 如图所示？

<div id="rt-header">
    <div class="rt-container">
        <div class="rt-grid-6 rt-alpha">
            <div class="rt-grid-6 rt-omega">
                <div class="rt-block ">    // This is the occurrence I want to override
                    my html....
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>

rt-grid-12 rt-alpha rt-omega 类不保持一致，有时是单个 div，具体取决于 Gantry/LESS 设置。如果您熟悉 Joomla 中使用的 RT 模板，您就会知道自始至终都在使用 rt-block，因此通常无法更改类。

更新 - 显示具有相同需求的另一种 HTML 可能性:

<div id="rt-header">
    <div class="rt-container">
        <div class="rt-grid-6 rt-alpha rt-omega">
            <div class="rt-block ">    // This is the occurrence I want to override
                my html....
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>

Answer 1

一般的 css 层次结构(在任何嵌套级别)由一个简单的空格给出

所以:

#rt-header .rt-block {
    /* CSS STYLE */
}