html - 如何使用伪 CSS 类选择器隐藏幻灯片 1 横幅内容？

Question

请帮助我确定我需要选择哪些 CSS 选择器来在幻灯片放映的第一张幻灯片/横幅中隐藏标题和标题。你可能会发现我错过的东西。

在浏览器中查看 WordPress 主题以使用 Google Dev 检查工具选择 CSS 类: https://demo.evisionthemes.com/clean-biz/

代码:

<div class="slide-item cycle-slide" style="background-image: url(&quot;https://i0.wp.com/demo.evisionthemes.com/clean-biz/wp-content/uploads/2016/04/architecture-1867635_1280.jpg?fit=1280%2C847&amp;ssl=1&quot;); position: absolute; top: 0px; left: 0px; z-index: 100; opacity: 0; display: block; visibility: hidden;">
    <div class="thumb-overlay main-slider-overlay"></div>
    <div class="container">
        <div class="row">
            <div class="col-xs-10 col-sm-10 col-md-8 col-xs-offset-1 col-sm-offset-1 col-md-offset-2 banner-content">
                <div class="banner-content-inner">
                    <div class="banner-content-inner">
                        <h2 class="banner-title alt-title"><a href="https://demo.evisionthemes.com/clean-biz/clean-biz-free-business-theme/">Clean Biz- Free Business Theme</a></h2>
                        <div class="text-content">
                            We create digital products for your online business.
                        </div>
                        <div class="btn-holder">
                            <a class="button" href="https://demo.evisionthemes.com/clean-biz/clean-biz-free-business-theme/">Click to Start</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我尝试过但失败了:

.banner-content-inner:first-child {
    display: none; 
}

.banner-content-inner, .slide-item:first-child {
    display: none; 
}


.cycle-slideshow .banner-content-inner:first-child {
display: none; 
}

我什至尝试向包含 PHP 文件的 slider 添加一个 if 条件，但没有成功。希望这会奏效。看起来很简单。

Answer 1

从上面的代码来看，解决方案是

.cycle-slideshow .slide-item:first-child .banner-content-inner {
    display:none;
}

分割:.cycle-slideshow 是父级，它包含多个 .slide-item

由于您正尝试以同类中的第一个元素为目标，因此您可以执行 .cycle-slideshow .slide-item:first-child

最后定位您希望隐藏的元素 .banner-content-inner。

问题已解决。