当我无法访问的外部样式表开始发挥作用时，将样式应用于所有其他 div 的最佳方法是什么？

Question

我正在使用 BXSlider 并尝试更改 slider 的每个偶数迭代的背景。 问题是我无法访问的 css 工作表正在影响页面上的所有滑块。

语境-

 <div class="bx-wrapper"> <div class="bx-viewport"> <div class="bx-slider"> </div> </div> </div>

Bx-wrapper 和 Bx-viewport 是通过 bxslider 库自动添加的。

css 表（我无权访问）的背景设置为#fff-

 .bx-wrapper.bx-viewport { background: #fff; }

我正在更改 slider 的背景 -

 .bx-wrapper.bx-viewport:nth-child(even){ background-color: rgb(245,245,245); }

我的主要问题是原始的#fff 优先，当我在开发工具中取消选中该样式时，我只能看到上面的 css 工作。 大家觉得保证上面的css优先的最好办法是什么？

Answer 1

听起来您的样式只是被现有样式表覆盖，对吗？

为了使您的样式优先于现有样式表，您的 CSS 范围应尽可能具体，并在必要时包含!important属性。

例如，而不是拥有...

.bx-wrapper .bx-viewport:nth-child(even){
    background-color: rgb(245,245,245);
} 

...您可能想尝试...

html body .bx-wrapper .bx-viewport:nth-child(even){    /*or whatever the full scope path to your elements would be*/
    background-color: rgb(245,245,245) !important;  
}

我希望这就是你要找的。