css - CSS3 :checked 直接同级仅使用列出的第一条规则

Question

似乎 Chrome (27.0.1453.116) 和 IE (10.0.9200.16618 w/更新到 10.0.6) 都按列出的顺序受到 CSS 规则阻止。

鉴于以下 CSS 规则，仅应用第一个规则。如果我切换顺序，渲染就会切换。同样，an!important也将强制应用后面的规则，但仍然不应用第一个规则。

input[type="radio"]:checked + label>div { background-color: #00A; };
input[type="radio"]:checked + label>span { color: #A00; };

这是 JSFiddle 上的 MWE：http: //jsfiddle.net/jzBRR/

任何反馈/建议（尤其是关于最知名的方法）或其他仅 CSS+HTML 的等效解决方案。

score 7 · Accepted Answer

这是每行末尾的杂散分号。它们不应该在那里，因为规则集不是以分号结尾的。相反，第一个尾随分号破坏了您的第二个选择器。

只需删除它们，它应该可以工作：

input[type="radio"]:checked + label>div { background-color: #00A; }
input[type="radio"]:checked + label>span { color: #A00; }

1 回答 1