给定这个 HTML，我如何选择 rt-block 来改变 CSS 仅当嵌套在 rt-header 中时，如图所示?
<div class="rt-container"><div class="rt-grid-6 rt-alpha"><div class="rt-grid-6 rt-omega"><div class="rt-block">//这是我想要覆盖的事件我的 html....<div class="clear"></div>
类 rt-grid-12 rt-alpha rt-omega 不会保持一致，有时是单个 div，具体取决于 Gantry/LESS 设置.如果您熟悉 Joomla 中使用的 RT 模板，您就会知道 rt-block 贯穿始终，因此通常不能更改该类.
UPDATE - 展示了具有相同需求的另一种 HTML 可能性:
<div class="rt-container"><div class="rt-grid-6 rt-alpha rt-omega"><div class="rt-block">//这是我想要覆盖的事件我的 html....<div class="clear"></div>
一般的 css 层次结构(在任何嵌套级别)由一个简单的空格给出
所以:
#rt-header .rt-block {/* CSS 样式 */}Given this HTML, how can I select rt-block to alter the CSS only when nested within rt-header as shown?
<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>
The classes rt-grid-12 rt-alpha rt-omega don't remain consistent, sometimes being a single div, depending on the Gantry/LESS settings. If you're familiar with RT Templates used in Joomla, you'll know that rt-block is used throughout, and so the class in general cannot be altered.
UPDATE - showing another possibility of HTML with the same need:
<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>
General css hierarchy (at any nested level) is given by a simple space
So:
#rt-header .rt-block {
/* CSS STYLE */
}
这篇关于如何为 CSS 规则选择元素的曾孙?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
