Question

我继承了Joomla CMS，并被要求进行更改。目前在网站上有一个基于owl-carousel的插件。有一系列幻灯片，每个幻灯片都有自己的背景图片。在背景图像上显示三个文本元素 - 标题，子标题和一行详细文本。构建时，所有幻灯片都应用相同的样式。问题是需要更改背景图像，有些会变亮，有些会变暗。这需要能够更改每张幻灯片的每个元素的文本格式，以便可以使用背景图像轻松读取文本

我对CSS不太熟练，我无法弄清楚如何编写如此多层的CSS。我认为这可能并不困难，我只是不知道从哪里开始。我的所有搜索都产生了简单的例子，但没有像我的情况那样复杂。

我已经设置了一个jsfiddle来帮助解决这个问题。在其中，我把一些东西都变成了通用的东西，除了我需要设计的元素之外，它们都被删除http://jsfiddle.net/x40p6nb1/

<div id=“sppb-addon-1482142525696” class=“clearfix”>                                                
<div class=“sppb-addon sppb-slider-wrapper sppb-slider-fullwidth-wrapper owl-theme”>                                
    <div class=“sppb-slider-item-wrapper”>                                      
        <div id=“slide-fullwidth” class=“owl-carousel owl-theme owl-loaded”>                                    
            <div class=“owl-stage-outer”>                               
                <div class=“owl-stage”>                         
                    <div class=“owl-item”>                      
                        <div class=“sppb-slideshow-fullwidth-item item”>                    
                            <div class=“sppb-slide-item-bg sppb-slideshow-fullwidth-item-bg”>               
                                <div class=“container”>         
                                    <div class=“sppb-slideshow-fullwidth-item-text”>        
                                        <h1 class=“sppb-fullwidth-title”>   
                                            <small class=“sppb-slidehsow-sub-title”>Sub Title 1</small><br>TITLE 1</h1> 
                                        <p class=“details”>Details 1</p>    
                                    </div>      
                                </div>          
                            </div>              
                        </div>                  
                    </div>                      
                    <div class=“owl-item”>                      
                        <div class=“sppb-slideshow-fullwidth-item item”>                    
                            <div class=“sppb-slide-item-bg sppb-slideshow-fullwidth-item-bg”>               
                                <div class=“container”>         
                                    <div class=“sppb-slideshow-fullwidth-item-text”>        
                                        <h1 class=“sppb-fullwidth-title”>   
                                            <small class=“sppb-slidehsow-sub-title”>Sub Title 2</small><br>TITLE 2</h1> 
                                        <p class=“details”>Details 2</p>    
                                    </div>      
                                </div>          
                            </div>              
                        </div>                  
                    </div>                      
                    <div class=“owl-item”>                      
                        <div class=“sppb-slideshow-fullwidth-item item”>                    
                            <div class=“sppb-slide-item-bg sppb-slideshow-fullwidth-item-bg”>               
                                <div class=“container”>         
                                    <div class=“sppb-slideshow-fullwidth-item-text”>        
                                        <h1 class=“sppb-fullwidth-title”>   
                                            <small class=“sppb-slidehsow-sub-title”>Sub Title 3</small><br>TITLE 3</h1> 
                                        <p class=“details”>Details 3</p>    
                                    </div>      
                                </div>          
                            </div>              
                        </div>                  
                    </div>                      
                </div>                          
            </div>                              
        </div>                                  
    </div>                                      
</div>

这就是我需要做的事情。

我希望子标题1（第15行; class =“sppb-slidehsow-sub-title”的第一个实例）为{color：＃575757！important;}

我想要TITLE 1（第15行; class =“sppb-fullwidth-title”的第一个实例）为{color：＃d2373c！important;}

我希望细节1（第16行; class =“details”的第一个实例）为{color：＃707070！important; font-weight：600！important;}

我希望Sub Title 2（第28行; class =“sppb-slidehsow-sub-title”的第二个实例）为{color：#ff0000！important;}

我希望TITLE 2（第28行; class =“sppb-fullwidth-title”的第二个实例）为{color：＃00ff00！important;}

我希望详细信息2（第29行; class =“details”的第二个实例）为{color：＃0000ff！important; font-weight：600！important;}

我希望Sub Title 3（第41行; class =“sppb-slidehsow-sub-title”的第三个实例）为{color：#ffff00！important;}

我想要TITLE 3（第41行; class =“sppb-fullwidth-title”的第三个实例）为{color：＃ff00ff！important;}

我希望细节3（第42行;类的第三个实例=“细节”）为{color：＃00ffff！important; font-weight：600！important;}

任何人都可以帮我解决这个问题吗？指出我正确的方向。

提前致谢！

Answer 1

CSS伪类:nth-of-type很痛苦，因为我们大多数人都希望它能够定位元素类以及元素类型......但它没有

相反，您可以使用兄弟组合子（~）以类似于使用:nth-of-type定位元素类型的方式来定位类。

<强> e.g。

.details {color: rgb(255, 0, 0);}
.details ~ .details {color: rgb(255, 127, 0);}
.details ~ .details ~ .details {color: rgb(0, 127, 0);}

工作示例：

p {
color: rgb(0, 0, 0);
}

.details {
color: rgb(255, 0, 0);
}

.details ~ .details {
color: rgb(255, 127, 0);
}

.details ~ .details ~ .details {
color: rgb(0, 127, 0);
}

.details ~ .details ~ .details ~ .details {
color: inherit;
}

<p>I am a paragraph.</p>

<p>I am another paragraph.</p>

<p class="details">I am the first instance of <code>class="details"</code>.</p>

<p>I am another paragraph.</p>

<p class="details">I am the second instance of <code>class="details"</code>.</p>

<p>I am another paragraph.</p>

<p>I am another paragraph.</p>

<p class="details">I am the third instance of <code>class="details"</code>.</p>

<p>I am another paragraph.</p>

<p class="details">I am the fourth instance of <code>class="details"</code>.</p>

<p class="details">I am the fifth instance of <code>class="details"</code>.</p>

CSS - 具有12层嵌套div类的nth-child

1 个答案: