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

Question

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

<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 */
}

Answer 2

为了选择.rt-block它何时处于下方，您所需要做#rt-header的就是简单（正如 Marc B 在评论中回答的那样）：

#rt-header .rt-block { /* rules here */ }

对于另一个与框架无关的示例，假设您有这样的结构：

<div class="content">
  <section class="introduction">
    <p>Hello!</p>
  </section>
  <section class="overview">
    <p>This is an overview.</p>
  </section>
</div>

我只想定位<p>内部的标签<section class="introduction">，无论父元素是什么。你可以这样编写 CSS：

.introduction p { /* rules */ }