Html css伪选择器的奇怪行为：选中

我使用纯CSS解决方案在我的网站上显示五星评级。这项技术在中有描述，我在我的网站的各个部分中都使用了它，但令人费解的是，它在某些情况下起作用，而在其他情况下却不起作用。由于继承的财产？ 该技术使用伪选择器“：checked”和通用同级组合选择器（~）

HTML标记：

<div class="rating">
    <input type="radio" name="rating" disabled="disabled" checked/>
    <span id="hide"></span>
    <input type="radio" name="rating" disabled="disabled"/>
    <span></span>
    <input type="radio" name="rating" disabled="disabled"/>
    <span></span>
    <input type="radio" name="rating" disabled="disabled"/>
    <span></span>
    <input type="radio" name="rating" disabled="disabled"/>
    <span></span>
    <input type="radio" name="rating" disabled="disabled"/>
    <span></span>
</div>

.rating input[type="radio"] {
    position:absolute;
    filter:alpha(opacity=0);
    -moz-opacity:0;
    -khtml-opacity:0;
    opacity:0;
    cursor:pointer;
    width:17px;
}

.rating span {
    width:24px;
    height:15px;
    line-height:15px;
    padding:1px 22px 1px 0; /* 1px FireFox fix */
    background:url(stars.png) no-repeat 3px -19px;
}

/* Change span immediately following the checked radio */
.rating input[type="radio"]:checked + span {
    background-position:3px -19px;
}


/* Reset all remaining stars back to default background.
   This supersedes the above due to its ordering. */
.rating input[type="radio"]:checked + span ~ span {
    background-position:3px 1px;
}

正如我上面所说的，我在我的网站的不同页面中使用这种技术，当它失败时，问题是最后两个CSS规则不适用。我已经通过删除伪选择器“：checked”验证了这些规则是否正确应用

有什么想法吗

---

提前感谢

从单选按钮中删除

禁用的

属性可以使其正常工作。如何制作单选按钮

：如果单选按钮被禁用，则已选中。
问题
您的问题是所有单选按钮都具有相同的
名称
属性。这意味着它们都属于同一组输入控件。单选按钮的工作方式是，一个组中的一个按钮在任何时候都只能被选中。虽然可以在前两个上指定
checked
属性，但这些属性上的检查状态为
false
，因为后者具有优先级

举个例子：



看看这里，谢谢@Lyall！我已经看过了，但是我没有发现任何对我的问题有用的东西。你能说得更精确一点吗？我想你必须做一个演示，它不适合我们调试……好的@Paulie_D，我会尝试用JSFIDLE或类似的语言重现这个问题你好，我成功重现了错误。似乎在使用OWL转盘组件时发生了错误。我试图删除属性“disabled”，但问题仍然存在。使用属性“disabled”是因为该组件被重用，用于显示分数（只读）和允许用户评分（输入）谢谢@James Donnelly，你说得对，你的修复解决了问题。但不幸的是，这是我在JSFIDLE中所做的复制问题。为了满足OWL转盘的要求，我克隆了同一个项目三次，但我没有意识到我引入了您评论的错误。有趣的是，同样的结果。然而，在我的网站上，每组单选按钮都有不同的名称，这个问题仍然存在。对不起，我弄错了。我将继续尝试在JSFIDLE中重现这个问题，但是使用您提出的修复方案。再次感谢。