1

我在我正在开发的网站上使用多个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,
})

这是一个小提琴。

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

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

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

4

1 回答 1

2

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

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

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

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

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

于 2016-05-27T09:47:25.040 回答