Chrome 和 Safari 中相邻 CSS 选择器的问题

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

我会使用:content psuedo-element

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

Answer 2

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

所以，你的 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