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

Question

请帮助我确定我需要选择哪些 CSS 选择器来隐藏幻灯片 SLIDE/Banner 的第一个 中的标题和说明。你可能会发现我错过的东西。

在浏览器中查看 WordPress 主题使用 Google Dev inspect 工具选择 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; 
}

我什至尝试将 if 条件添加到滑块包含 PHP 文件，但没有成功。希望这会奏效。看起来很简单。

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。

问题已解决。

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

How to Hide Slide 1 Banner Content with Pseudo CSS Class Selector?

html

css

wordpress-theming

css-selectors

pseudo-class