6

考虑以下内容（在这里找到小提琴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  
}
4

2 回答 2

3

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

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

于 2013-09-04T00:08:54.027 回答
0

我会使用: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";
}

示例笔

于 2013-09-05T20:57:14.513 回答