如何更改bx滑塊，頁面上的多個滑塊的css文件

Question

我正在開發一個bx滑塊的網站。

我需要在幻燈片html內容頁面上的三個滑塊。

我在頁面上添加了一個bx滑塊並使用css對其進行了自定義。我對jquery.bxslider.css進行了更改

現在我在頁面上添加了另一個bx滑塊。但它也適用於我在該新滑塊上修改的css。所以我想改變新添加的滑塊的CSS，但不是我修改的那一個。所以我認爲它需要兩個css文件。

我試過CSS與nth孩但不工作，它適用於兩個滑塊。

那麼，我如何更改bx滑塊中的css文件？

Answer 1

您應該只需將類添加到每個不同的bx滑塊。你不需要2個獨立的CSS文件。

HTML

<ul class="bxslider one"></ul> 
<ul class="bxslider two"></ul> 

CSS

.bxslider.one { 
    background: blue; 
} 
.bxslider.two{ 
    background: red; 
} 

如果不工作，你可以爲你的BX-滑塊容器和內針對bx-wrapper類：

HTML

<div class="slider-one"> 
    <ul class="bxslider"></ul> 
</div> 
<div class="slider-two"> 
    <ul class="bxslider"></ul> 
</div> 

CSS

.slider-one .bx-wrapper .bx-viewport{ 
    background: blue; 
} 
.slider-two .bx-wrapper .bx-viewport{ 
    background: red; 
}