Question

我想要完成的是在选择时显示隐藏的图标（.complete）（选中）。图标（.complete）是复选框输入的兄弟。只有在选中复选框时，我才会如何显示图标？我在寻找什么样的css选择器？

<div class="google btn social facebook googleplus">
    <label for="check_google">
        <input type="checkbox" id="check_google" name="google" class="social_check" />
        <i class="icon-ok-sign complete"></i><i class="icon-google-plus-sign"></i> Google
    </label>
</div>

i.complete{
  visibility: hidden;
}
input.social_check:checked + label i.complete{
  visibility: visible;
}

这是一个fiddle，向您展示我正在使用的内容。

Answer 1

您正在寻找~或General Sibling选择器。

以下是其中的一个小提琴：http://jsfiddle.net/ZurAk/173/

此处有更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

Answer 2

你实际上大部分都是正确的 - 你需要的只是摆脱:checked选择器中的标签。

input.social_check:checked + label i.complete匹配“i.complete，这是一个标签的子项，它紧跟在使用类social_check的已检查输入后”

您的i.complete就在复选框后面，所以您只需要使用它：

input.social_check:checked + i.complete

复选框作为按钮显示隐藏的图标：已选中

2 个答案: