Question

我创建了一个带有文本寻呼机链接的滑块显示 -

<div class="col-lg-12 col-lg-offset-0">
                 <div class="cycle-slideshow" 
                    data-cycle-fx=scrollHorz
                    data-cycle-timeout=0
                    data-cycle-pager="#no-template-pager"
                    data-cycle-pager-template=""
                    >
                    <img src="../gray/img/s1.png">
                    <img src="../gray/img/s2.png">
                    <img src="../gray/img/s3.png">
                    <img src="../gray/img/s4.png">
                    <img src="../gray/img/s5.png">
                </div>
                <div class="pager-bg">
                <div id=no-template-pager class="cycle-pager center external ">

                    <div class="slidebtn active"><a href=#>Brand Strategy</a></div>
                    <div class="slidebtn"><a href=#>Company + Product Launches</a></div>
                    <div class="slidebtn"><a href=#>Media Relations</a></div>
                    <div class="slidebtn"><a href=#>Voicing Your Expertise</a></div>
                    <div class="slidebtn"><a href=#>Content Creation + Seeding</a></div>

                </div>
                </div>
                </div>

当我在css中定位.cycle-pager-active类时，我可以控制除字体颜色之外的所有内容（即字体，字体大小）。我甚至尝试从网站上剥离所有的CSS，但仍然无法改变颜色。这有什么想法吗？

这里是css

.cycle-pager-active {
    background-color:rgba(0,0,0,1);
    -webkit-transition:background .3s ease-in-out;
    -moz-transition:background .3s ease-in-out;
    transition:background .3s ease-in-out;
    height: 80px;
    color:#FF0000;
}

谢谢！

Answer 1

定位以下链接：

.cycle-pager-active a{ color:#FF0000; }

Answer 2

在css中将.cycle-pager-active更改为.cycle-pager .active a。

以下是一个示例：http://jsfiddle.net/fxtqv433/1/

这是html <a>标签的奇怪行为。例如，如果要更改颜色或文本修饰，则必须在css中定位元素，而不是父元素。

希望这有帮助。

CSS不会在周期2中更改.cycle-pager-active的文本颜色

2 个答案: