如何为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 */ }