如何使用CSS伪类选择器隐藏幻灯片首屏横幅的标题与说明？

Got it, let's tackle this problem step by step. Since your PHP conditional approach didn't work, using CSS pseudo-classes is a solid alternative. Here's how to do it properly:

Step 1: Identify the Right Selectors with Developer Tools #

First, open the theme's demo site and use Chrome DevTools (right-click → Inspect) to examine the slider structure:

• The slider container uses the class .cycle-slideshow
• Each slide is wrapped in a .cycle-slide element
• The currently active slide (which is the first one on page load) gets the .cycle-slide-active class
• The slide title has the class .slider-title, and the description uses .slider-description

Step 2: Apply the CSS to Hide Elements #

You have two reliable options depending on your needs:

Option 1: Hide Only When the First Slide is Active

This ensures the title/description are hidden only when the first slide is visible (they'll reappear if the slider cycles back to it later, if that's what you want):

/* Hide title and description on the currently active first slide */
.cycle-slide-active .slider-title,
.cycle-slide-active .slider-description {
    display: none !important;
}

Option 2: Hide Permanently on the First Slide

If you want the first slide's title/description hidden always (even if the slider cycles back to it), use the :first-of-type pseudo-class:

/* Hide title and description exclusively on the first slide */
.cycle-slideshow .cycle-slide:first-of-type .slider-title,
.cycle-slideshow .cycle-slide:first-of-type .slider-description {
    display: none !important;
}

Step 3: Add the CSS to Your WordPress Site #

Paste either of the above code snippets into:

• WordPress Dashboard → Appearance → Customize → Additional CSS (this is the easiest, no file editing needed)
• Or your child theme's style.css file (if you're using a child theme for customizations)

The !important flag is included to override any existing theme styles that might be applying to these elements.

内容的提问来源于stack exchange，提问作者user1426442