条件 CSS 选择器通过引用邻居部分

Question

我有以下 css 效果很好，但是，它在我使用 CMS 的站点上执行，所以我试图编写一个选择器，它只在 example-widget 上执行，当 example-内容存在。如您所见，它们位于两个独立的部分。

该小部件在网站上的任何地方都运行良好，但存在上述示例内容的页面除外，所以我只是试图修复这一页面

@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>

Answer 1

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

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

if ( $('.component-content').length > 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>

条件 CSS 选择器通过引用邻居部分

Conditional CSS Selector by referencing neighbor section

html

css

css-selectors