如何覆盖 Unslider 的箭头样式？

Question

我正在我正在使用的网站上使用个 Unslider 实例，其中一个需要有导航箭头。我添加了箭头，但现在我无法设置它们的样式，它们似乎无法通过 CSS 访问。 !important; 规则也不起作用。

这是我的 html:

<div class="unslider">
    <div class="slider">
       <ul>
          <li>
             <!-- slide content -->
          </li>
          <li>
             <!-- slide content -->
          </li>
       </ul>
    </div>
</div>

这是我的 SCSS（基于插件本身生成的标记）：

.unslider {
    .slider {
        // slide styling
    }
    .unslider-arrow {
        background: tomato !important;
    }
}

还有我的初始化：

$('.slider').unslider({
   autoplay: true, delay: 7000,
   arrows: true,
   nav: false,
})

这是一个Fiddle.

NOTE: All of the samples are just blank code, which size has been reduced in order to help better and quicker understanding.

无论我做什么，我的SCSS(CSS)都射不到箭

SOLUTION: As Marcos described in his answer, You should be very careful about your CSS hierarchy. If you are adding custom containers, unslider might mix-up your selectors slightly.

Answer 1

箭头不是 .slider 的子元素。容器。

要实现您想要的效果，SCSS 层次结构应如下所示：

.unslider {
        .unslider-arrow {
            background: tomato ;
        }
}

您的原始代码似乎添加了您不需要的 .slider 父级。

工作fiddle： https://jsfiddle.net/cq5p2g1e/2/

如何覆盖 Unslider 的箭头样式？

How to override Unslider's arrows styling?

html

css

jquery

unslider

这是一个Fiddle.