Chrome和Safari中相邻CSS Selector的问题

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

您可以尝试使用同级组合器。 ~类似于+，但是，它\xe2\x80\x99s 不太严格。虽然相邻选择器只会选择紧邻前一个选择器之前的第一个元素，但这个选择器更为通用。它会选择树中前一个选择器后面的任何元素。

\n\n

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

\n\n

input[type="checkbox"]:checked + span {\n  display:none  \n}\n\ninput[type="checkbox"] + span {\n  display:block  \n}\n\ninput[type="checkbox"]:checked ~ span ~ span {\n  display:block  \n}\n\ninput[type="checkbox"] + span + span {\n  display:none  \n}\n

\n\n

这是@Adrift提供的一个工作示例，使用上面的代码：jsfiddle.net/YDuzC/10

\n