问题描述
给定这个 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....
类 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 规则选择元素的曾孙?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!