Html css~选择器不会将样式应用于所有目标元素（z索引到下一个/上一个标签）_Html_Css

Html css~选择器不会将样式应用于所有目标元素（z索引到下一个/上一个标签）

html css

Html css~选择器不会将样式应用于所有目标元素（z索引到下一个/上一个标签）,html,css,Html,Css,我有下面的纯css幻灯片，除了缩略图（都是指向的标签）之外，我还尝试实现“next/prev”按钮缩略图是带有图像的标签，所以我为按钮创建了更多标签。问题是，我不知道如何正确地隐藏它们，除了选中输入旁边的那些我尝试了以下代码： .slider input[name='slide_switch'] ~ label.next, .slider input[name='slide_switch'] ~ label.previous { z-index: -1 } .slider input

我有下面的纯css幻灯片，除了缩略图（都是指向

的标签）之外，我还尝试实现“next/prev”按钮

缩略图是带有图像的标签，所以我为按钮创建了更多标签。问题是，我不知道如何正确地隐藏它们，除了选中输入旁边的那些

我尝试了以下代码：

.slider input[name='slide_switch'] ~ label.next,
.slider input[name='slide_switch'] ~ label.previous
{
    z-index: -1
}
.slider input[name='slide_switch']:checked ~ label.next,
.slider input[name='slide_switch']:checked ~ label.previous {
    z-index: 1
}

这应该针对HTML中的所有

和

，但由于某些原因，它不起作用，我“可以看到”多个按钮，一个接一个，因为我给了它们

不透明度：0.6

，它们看起来不是半透明的。但是，最后两张图片显示正确的不透明度并且正在工作，如果我在最后一张图片中，我可以单击“上一张”按钮，它将带我到第四张图片，如果我单击“下一张”，它将带我到第五张图片（不幸的是，所有图片都会出现这种情况）

我在这里工作：

HTML代码：

<div class="slider">
    <input type="radio" name="slide_switch" id="id1"/>
    <label class="thumbnail" for="id1">
        <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
    </label>
    <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
    <label class="next" for="id2">></label>

    <input type="radio" name="slide_switch" id="id2" checked="checked"/>
    <label class="thumbnail" for="id2">
        <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
    </label>
    <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
    <label class="previous" for="id1">></label>
    <label class="next" for="id3">></label>

    <input type="radio" name="slide_switch" id="id3"/>
    <label class="thumbnail" for="id3">
        <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
    </label>
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
    <label class="previous" for="id2">></label>
    <label class="next" for="id4">></label>

    <input type="radio" name="slide_switch" id="id4"/>
    <label class="thumbnail" for="id4">
        <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
    </label>
    <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
    <label class="next" for="id5">></label>
    <label class="previous" for="id3">></label>

    <input type="radio" name="slide_switch" id="id5"/>
    <label class="thumbnail" for="id5">
        <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
    </label>
    <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>
    <label class="previous" for="id4">></label>
</div>

（）

您没有正确使用波浪线选择器。瓷砖左侧后面的所有同级元素实际上都将匹配

因此，即使您的代码将z索引设置为-1，在大多数情况下也会被此覆盖（因为此规则更为具体）：

您没有正确使用波浪线选择器。瓷砖左侧后面的所有同级元素实际上都将匹配

因此，即使您的代码将z索引设置为-1，在大多数情况下也会被此覆盖（因为此规则更为具体）：

这条规则

.slider input[name='slide_switch']:checked ~ label.next,
.slider input[name='slide_switch']:checked ~ label.previous {
    z-index: 1
}

将针对所有

标签。下一个/标签。在输入[name='slide\u switch']
之后出现的上一个，而不仅仅是下一个输入[name='slide\u switch']

您需要使用其for
属性将每个输入[name='slide\u switch']
特定标签作为目标，或者使用类型的第n个

根据评论更新
解决方案1-首选
不要更改：选中上面的规则，而是将每组输入/图像/拇指/箭头
包装在div
中，并将此规则的滑块>img
选择器更改为滑块>div>img


堆栈片段

*{margin:0；padding:0}
正文{背景：#ccc}
.滑块{
宽度：640px；
位置：相对位置；
填充顶部：320px；
保证金：20px自动；
盒影：0 10px20px-5pxRGBA（0,0,0,0.75）；
}
.滑块>div>img{
位置：绝对位置；
左：0；上：0；
过渡：均为0.5s；
显示：块
}
.滑块输入[name='slide_开关']{
显示：无；
}
.slider label.next、.slider label.previous{
位置：绝对位置；
左：0；上：0；
显示：块；
字号：3em；
不透明度：0.6；
光标：指针；
颜色：白色；
}
.slider label.next{左：560px；线高：320px}
.slider label.previous{left:50px；线高度：320px；变换：rotateY（180度）}
.滑块标签.缩略图{
利润率：18px 0 0 18px；
边框：3px实心#999；
浮动：左；
光标：指针；
过渡：均为0.5s；
不透明度：0.6；
}
.滑块标签.缩略图：悬停{不透明度：0.8}
.slider label.缩略图img{
显示：块；
}
.slider输入[name='slide_开关']：选中+label.缩略图{
边框颜色：#666；
不透明度：1；
}
.slider输入[name='slide_开关']~label.next，
.slider输入[name='slide_开关']~label.previous
{
z指数：-1
}
.slider输入[name='slide_开关']：选中~label.next，
.slider输入[name='slide_开关']：选中~label.previous{
z指数：1
}
.slider输入[name='slide_开关']~img{
不透明度：0；
转换：比例（1.1）；
}
.滑块输入[name='slide_switch']：选中+label.缩略图+img{
不透明度：1；
变换：比例（1）；
}

>
>
>
>
>
>
>
>
此规则
.slider input[name='slide_switch']:checked ~ label.next,
.slider input[name='slide_switch']:checked ~ label.previous {
    z-index: 1
}

将针对所有标签。下一个/标签。在输入[name='slide\u switch']
之后出现的上一个，而不仅仅是下一个输入[name='slide\u switch']

您需要使用其for
属性将每个输入[name='slide\u switch']
特定标签作为目标，或者使用类型的第n个

根据评论更新
解决方案1-首选
不要更改：选中上面的规则，而是将每组输入/图像/拇指/箭头
包装在div
中，并将此规则的滑块>img
选择器更改为滑块>div>img


堆栈片段

*{margin:0；padding:0}
正文{背景：#ccc}
.滑块{
宽度：640px；
位置：相对位置；
填充顶部：320px；
保证金：20px自动；
盒影：0 10px20px-5pxRGBA（0,0,0,0.75）；
}
.滑块>div>img{
位置：绝对位置；
左：0；上：0；
过渡：均为0.5s；
显示：块
}
.滑块输入[name='slide_开关']{
显示：无；
}
.slider label.next、.slider label.previous{
位置：绝对位置；
左：0；上：0；
显示：块；
字号：3em；
不透明度：0.6；
光标：指针；
颜色：白色；
}
.slider label.next{左：560px；线高：320px}
.slider label.previous{left:50px；线高度：320px；变换：rotateY（180度）}
.滑块标签.缩略图{
利润率：18px 0 0 18px；
边框：3px实心#999；
浮动：左；
光标：指针；
过渡：均为0.5s；
不透明度：0.6；
}
.滑块标签.缩略图：悬停{不透明度：0.8}
.slider label.缩略图img{
显示：块；
}
.slider输入[name='slide_开关']：选中+label.缩略图{
边框颜色：#666；
不透明度：1；
}
.slider输入[name='slide_开关']~label.next，
.slider输入[name='slide_开关']~label.previous
{
z指数：-1
}
.滑块输入[name='slide_switch']：选中E
.slider input[name='slide_switch']:checked ~ label.next,
.slider input[name='slide_switch']:checked ~ label.previous {
    z-index: 1
}