css - Chrome 和 Safari 中相邻的 CSS 选择器出现问题

Question

考虑以下内容(在此处找到 Fiddle 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