Question

我目前正在使用第三方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的位置

Answer 1

仅选择比class =“content”

更深的一级的类

.content > .st-block

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

1 个答案: