通过引用邻居部分的条件 CSS 选择器 [重复]答案

【问题标题】：Conditional CSS Selector by referencing neighbor section [duplicate]通过引用邻居部分的条件 CSS 选择器 [重复]
【发布时间】：2021-09-09 06:11:47
【问题描述】：

我有以下运行良好的 css，但是，它在我使用 CMS 的整个网站上执行，所以我正在尝试编写一个选择器，该选择器仅在存在示例内容时在示例小部件上执行。如您所见，它们位于两个单独的部分中。

除了存在上述示例内容的一页之外，该小部件在网站上的任何地方都可以正常工作，所以我只是试图修复这一页

@media(max-width: 767.5px) {
    #content > div > div.row.component.column-split .example-content {
        padding-left: 30px;
    }
    #content > div > div.row.component.column-split .example-widget{
        margin-left: 30px;
    }
}


<div class="row component column-split">
    <div class="col-sm-8">
        <div class="row">
            <div class="component rich-text">
                <div class="component-content">
                    <section class="example-content">
                        <p>Lorem Ipsum</p>
                        <br>
                        <p>Lorem Ipsum</p>
                        <br>
                        <span>Lorem Ipsum</span><br>
                        <span>Lorem Ipsum</span>
                    </section>
                </div>
            </div>
        <section class="example-widget" id="example-widget">
            <div class="widget-title">
                <h3>Lorem Ipsum</h3>
            </div>
        </section>
        </div>
    </div>
    <div class="col-xl-4">
    <div class="row"></div>
    </div>
</div>

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

CSS 中仍然没有父选择器，因此您需要使用 javascript 检查 example-content 元素是否存在。

这是一个使用 jQuery 的简单示例：

if ( $('.component-content').length &gt; 0) $('.example-widget').addClass('highlight');

@media(max-width: 767.5px) {
    #content > div > div.row.component.column-split .example-content {
        padding-left: 30px;
    }
    #content > div > div.row.component.column-split .example-widget{
        margin-left: 30px;
    }
    .highlight {
        color: red;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row component column-split">
    <div class="col-sm-8">
        <div class="row">
            <div class="component rich-text">
                <div class="component-content">
                    <section class="example-content">
                        <p>Example content</p>
                        <br>
                        <p>Example content</p>
                        <br>
                        <span>Example content</span><br>
                        <span>Example content</span>
                    </section>
                </div>
            </div>
        <section class="example-widget" id="example-widget">
            <div class="widget-title">
                <h3>Example widget</h3>
            </div>
        </section>
        </div>
    </div>
    <div class="col-xl-4">
    <div class="row"></div>
    </div>
</div>

【讨论】：

这完全有效，谢谢。