将CSS / SASS规则应用于外部元素,而不是内部元素

时间:2014-01-30 17:16:41

标签: css sass

我目前正在使用第三方JS库在页面/ DOM中插入内容区域,该库是Sir Trevor。

现在我想应用一些自定义CSS规则,例如:

.st-block:before {
    @include roundedIcon(38px, $colorX, $colorY);
    content: counter(mylistCounter, decimal);
    counter-increment: mylistCounter;
    margin-right: $margin-variable;
}

现在这个效果很好,并且在我的div与.st-block类之前放了一个数字。但是,具有此类的DIV可以并且有时确实包含具有相同类的子div,如下所示:

<div class="content">

    <div id="st-block-16" class="st-block st-icon--add st-item-ready" data-type="listicle" data-instance="st-editor-8">
        <!-- here's the child... grrr!!! -->
        <div id="st-block-17" class="st-block st-icon--add st-item-ready" data-type="listicle" data-instance="st-editor-8">
            Child Div Here...
        </div>
    </div>

    <div id="st-block-18" class="st-block st-icon--add st-item-ready" data-type="listicle" data-instance="st-editor-8">
    No Child Div
    </div>

    <div id="st-block-19" class="st-block st-icon--add st-item-ready" data-type="listicle" data-instance="st-editor-8">
    No Child Div
    </div>

</div>

如何修改CSS / SASS类以防止同一类的子/嵌套div受到影响(在上面的示例中,ID为id="st-block-17")?请注意,我无法控制ID的位置

1 个答案:

答案 0 :(得分:0)

仅选择比class =“content”

更深的一级的类
.content > .st-block