为什么通用同级组合器允许切换伪元素的内容，而不允许相邻同级的内容？

Question

在这个问题中，“像jQuery的.click（）一样工作的CSS3选择器？”我使用的状态发布了一个答案]，以切换元素的显示。:checked``input``type="checkbox"

这是我在该答案中发布的演示的HTML：

<input type="checkbox" id="switch" />
<nav>
    <h2>This would be the 'navigation' element.</h2>
</nav>
<label for="switch">Toggle navigation</label>

和CSS（为简洁起见，省略了过渡）：

#switch {
    display: none;
}
#switch + nav {
    height: 0;
    overflow: hidden;
    /* transitions followed */
}
#switch:checked + nav {
    height: 4em;
    color: #000;
    background-color: #ffa;
    /* transitions followed */
}

label {
    cursor: pointer;
}

有一次，我张贴发生，我认为我们可以在答案 也 拨动的文本label用于触发复选框的状态变化，使用下面的选择（已修订label的文本‘导航’）：

label {
    display: inline-block;
    cursor: pointer;
}

#switch + nav + label::before {
    content: 'Show ';
}

#switch:checked + nav + label::before {
    content: 'Hide ';
}

这不起作用，因为当处于input未检查状态（和label显示的Show navigation）时选择器匹配时，选择器在更改状态时 _无法_匹配input。请注意，过渡仍然对nav元素起作用，并且原始匹配选择器指示下一个同级组合器原始匹配。上面的链接显示了不起作用的选择器的简化演示（在Chrome27 / Windows XP中）。

然后我想到尝试使用通用同级组合器，以减少选择器链。这导致了以下CSS（为简洁起见，再次删除了转换）：

#switch:checked + nav {
    background-color: #ffa;
}

label {
    display: inline-block;
    cursor: pointer;
}

#switch ~ label::before {
    content: 'Show ';
}

#switch:checked ~ label::before {
    content: 'Hide ';
}

有点出乎我的意料，这个工作（在content该的label响应的改变的状态改变input）。

所以，问题是：为什么通用同级组合器不允许更新后一个同级链，而链接的下一个同级组合器（匹配DOM的元素和结构）却不允许呢？

此外，这似乎在Firefox（Windows XP上为21）上 确实 有效；所以我想这个问题会稍作更改，包括：这是Chrome /
Webkit中的错误还是预期的行为？

而且，甚至 更进一步 ，虽然这是Chrome中的错误（感谢@Boltclock），但还是有些荒唐的“不做任何事情”动画修复了无法正常工作的演示（尽管存在其他更好的替代方法，如Scott的答案显示）：

body {
    -webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
    from {
        padding: 0;
    }
    to {
        padding: 0;
    }
}
#switch {
}
#switch + nav {
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
#switch:checked + nav {
    background-color: #ffa;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
label {
    display: inline-block;
    cursor: pointer;
}
#switch + nav + label::before {
    content:'Show ';
}
#switch:checked + nav + label::before {
    content:'Hide ';
}

注意： 之所以用此“修复”更新问题，而不是将其发布为答案，是因为问题 不是 “我该如何解决？” 但是（基本上）“为什么不起作用？”

Answer 1

这是WebKit浏览器中的一个长期错误，与将某些动态伪类与下一个同级组合器一起使用有关。无论您是将样式应用于兄弟元素本身还是该兄弟元素的伪元素，都会发生这种情况。

所以要么是固定的，要么是其他触发/触发了它。