Question

请考虑以下内容（此处为小提琴http://jsfiddle.net/burninromz/YDuzC/8/）

当您单击复选框时，应该出现相应的标签。这在Safari和Chrome中不起作用，但在IE，Firefox和Opera上不起作用。当您检查chrome和safari中的元素时，您会看到该样式实际应用于该元素，但未正确呈现。任何想法为什么会这样？

见下文。

html

<div>
    <input type="checkbox"></input>
    <span>Unchecked</span>
    <span>Unchecked</span>

CSS

    input[type="checkbox"]:checked + span {
      display:none  
    }

    input[type="checkbox"] + span {
      display:block  
    }

    input[type="checkbox"]:checked + span + span {
      display:block  
    }

    input[type="checkbox"] + span + span {
      display:none  
    }

此选择器不起作用

input[type="checkbox"]:checked + span + span {
  display:block  
}

Answer 1

您可以尝试使用兄弟组合器。 ~与+类似，但不太严格。虽然相邻的选择器只会选择前一个选择器之前立即的第一个元素，但这个元素更通用。它将选择任何元素，只要它们遵循树中的前一个选择器。

所以，你的CSS看起来像这样......

input[type="checkbox"]:checked + span {
  display:none  
}

input[type="checkbox"] + span {
  display:block  
}

input[type="checkbox"]:checked ~ span ~ span {
  display:block  
}

input[type="checkbox"] + span + span {
  display:none  
}

以下是由@Adrift提供的工作示例，使用上述代码：jsfiddle.net/YDuzC/10

Answer 2

我会使用:content伪元素

<强> HTML

<div>
  <input type="checkbox" class="check" />
    <span></span>
</div>

<强> CSS

span{
  display:block;
}

input[type="checkbox"] + span:before {
  content:"Unchecked";
}

input[type="checkbox"]:checked + span:before {
  content:"Checked";
}

Example Pen

Chrome和Safari中相邻CSS Selector的问题

2 个答案: