将样式应用于滑块外部的单独元素

Question

我有一个纯CSS滑块，其中有一些点指示器显示我在哪张幻灯片。但是我还有另一组数字指示器在滑块之外，我想改变它们的颜色。

我的工作指标的css示例：

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3 {
    background: rgba(0, 0, 0, 0.8);
}

此代码不起作用：

input#img-1:checked ~ #title label#slide-link-1,
input#img-2:checked ~ #title label#slide-link-2,
input#img-3:checked ~ #title label#slide-link-3 {
    color: red;
}

也许超过三张幻灯片。请查看我的代码：http://codepen.io/anon/pen/ZbPvde

有没有办法用CSS实现它或者请帮助我弄清楚如何用jQuery完成它。非常感谢。

Answer 1

你实际上使用的是id而不是类，所以你只能使用＃img-dot-1，＃img-dot-2，＃img-dot-3一次（同样适用于#slide -link）在你的整个html页面中。 因此，您可以直接访问：

#img-dot-1,
#img-dot-2,
#img-dot-3 {
    background: rgba(0, 0, 0, 0.8);
}

#slide-link-1,
#slide-link-2,
#slide-link-3 {
    color: red;
}

如果 color：red 仍无效，请尝试：

#slide-link-1,
#slide-link-2,
#slide-link-3 {
    color: red !important;
}

这可能是由于某些代码附加到内部元素造成的。

编辑：我添加了以下屏幕截图，以显示功能更好：

编辑2：

如您所希望的，您的代码会更改当前的幻灯片编号，我接下来要做到这一点：

我添加了下一个CSS：

.red {
    color: red;
}

#img-dot-1,
#img-dot-2,
#img-dot-3 {
    background: rgba(0, 0, 0, 0.8);
}

然后我将 values 添加到这样的复选框中：

<input type="radio" name="radio-btn" id="img-2" value="2" />

然后我添加了JQuery和下一个脚本以使其工作：

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
function select(i)
{
    $("#slide-link-1").removeClass("red");
    $("#slide-link-2").removeClass("red");
    $("#slide-link-3").removeClass("red");
    $("#slide-link-"+i).addClass("red");
}
$("input[type='radio']").change(function()
{
    select($(this).val());
});
</script>

如果你想让它以红色开始，请添加：

$("#slide-link-1").addClass('red') 

到脚本部分。