CSS3:checked direct sibling仅使用列出的第一个规则

Question

似乎Chrome(27.0.1453.116)和IE(10.0.9200.16618 w/update to 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等效解决方案.

Answer 1

它是每行末尾的杂散分号.他们不应该在那里,因为规则集不是以分号终止的.相反,第一个尾随分号打破了你的第二个选择器.

只需删除它们就可以了:

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