伪类的奇怪CSS错误

Question

我刚刚在CSS中发现了（对我而言）奇怪的行为。

http://jsfiddle.net/4dL3xv6c/1/

第一个框应在＆＃34;是＆＃34;之间切换。并且为空，而第二个应该在第一个框的相反位置之间切换（是=否/否=是）并且为空。

测试场景1

操作：点击第一个框，然后是第二个，然后再点击第一个。

预期结果：第一个框为空，第二个框为＆＃34;是＆＃34;。

实际结果：第一个框为空，第二个框仍为＆＃34;否＆＃34;。

测试场景2

操作：点击第二个框，然后点击第一个。

预期结果：第一个框是＆＃34;是＆＃34;第二个框是＆＃34; No＆＃34;。

实际结果：第一个框是＆＃34;是＆＃34;第二个方框也是＆＃34;是＆＃34;。

换句话说，如果我切换第一个方框，第二个方框没有受到影响 - 但它应该。

这是CSS的正确行为（在Chrome中），还是有错误？我可以按预期工作吗？

---

HTML：

<input id="perm_active" type="checkbox" value="yes" />
<input id="temp_opposite" type="checkbox" value="yes" />
<label for="perm_active" class="btn btn-default btn-primary-toggle"><span></span></label>
<label for="temp_opposite" class="btn btn-default btn-temporary-toggle"><span></span></label>

CSS：

input {
    display: none;
}

label {
    display: block;
    float: left;
    width: 50px;
    height: 50px;
    margin-right: 10px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #ddd;
}

/* Checked + empty */
input:checked + input + label span:before {
    content: "Yes";
    color: #3c763d;
}

/* Empty + checked */
input:checked + label + label span:before {
    content: "Yes";
    color: #3c763d;
}

/* Checked + checked */
input:checked + input:checked + label + label span:before {
    content: "No";
    color: #a94442;
}