如何覆盖 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.

---

注意：所有示例都只是空白代码，为了帮助更好更快地理解，已经缩小了大小。

无论我做什么，我的 SCSS(CSS) 都无法到达箭头。

解决方案： 正如 Marcos 在他的回答中所描述的，您应该非常小心您的 CSS 层次结构。如果您要添加自定义容器，unslider 可能会稍微混淆您的选择器。

Answer 1

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

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

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

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

工作小提琴： https://jsfiddle.net/cq5p2g1e/2/