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

【问题标题】：Apply CSS/SASS rule to outer elements and not to inner elements将 CSS/SASS 规则应用于外部元素而不是内部元素
【发布时间】：2014-01-31 19:11:16
【问题描述】：

我目前正在使用在页面/DOM 中插入内容区域的第三方 JS 库，该库是 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 的位置

【问题讨论】：

标签： css sass

【解决方案1】：

只选择比 class="content" 的 div 深一层的类

.content > .st-block

【讨论】：