Question

根据http://www.w3schools.com/cssref/sel_after.asp，after选择器包含每个元素之后的内容。我完全理解。但我在互联网上找到了一个仅限css的滑块，这个滑块：link这部分代码

.slider label:after {
    border-radius: 100%;
    bottom: -.2em;
    box-shadow: inset 0 0 0 .2em #111,
                inset 0 2px 2px #000,
                0 1px 1px hsla(0,0%,100%,.25);
    content: '';
    left: -.2em;
    position: absolute;
    right: -.2em;
    top: -.2em;
}

使所选图片的颜色为白色的无线电圆。不应该在.slider里面的每个标签后面插入吗？为什么它只适用于选定的一个？

Answer 1

当然，你的理解是正确的。但是特定于滑块，它也有CSS规则以下。

1, '11, 12'
2, '22, 33'

以上代码的工作方式如下：如果选中了输入，请添加背景颜色为兄弟（+）元素，标签为

Answer 2

应用于每个标签，而不仅仅是所选标签。

打开演示页：http://codepen.io/joshnh/full/KwilB

右键单击滑块并选择＆＃34; Inspect element＆＃34;并找到ul class="slider"元素。

检查每个label元素下的li，并注意此CSS规则生成的::after DOM节点。它出现在所有标签上。

很难理解：选择CSS之后

2 个答案: