CSS伪选择器的奇怪行为：选中

Question

我正在使用纯CSS解决方案在我的网站上显示五颗星的评分。 https://www.danielkeithjones.com/Articles/Web_Development/Pure_CSS_5_Star_Rating_System_with_Radios/中描述了此技术，我在网站的各个部分中都使用了该技术，但在某些情况下会莫名其妙地起作用，而在其他情况下则无法使用。 由于继承的属性？ 该技术利用伪选择器“：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>

CSS规则：

.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”可以正确应用这些规则。

有任何想法吗？

提前致谢

Answer 1

问题

您的问题是所有单选按钮都具有相同的name属性。 这意味着它们都属于同一组输入控件。 单选按钮的工作方式是，一次只能检查一组中的一个。 尽管可能在前两个属性上指定了checked属性，但由于前两个属性具有较高的优先级，因此它们的checkness状态为false 。

举个例子：

 <input type="radio" name="foo" checked /> <input type="radio" name="foo" checked /> <input type="radio" name="foo" checked /> <input type="radio" name="bar" checked /> 

即使所有三个"foo"单选按钮都指定了checked属性，但实际上只有第三个按钮被选中，因为它们都共享相同的name属性。 还检查了具有不同name的"bar"单选按钮，因为它不属于"foo"组。

修复

因此，解决方法是确保不同的单选按钮组具有不同的name属性。 在您的情况下，所有三个组共享name ： "gl_satisfaction_12" 。 在这个JSFiddle演示中，我将这三个组重命名为"group_1" ， "group_2"和"group_3" 。

Answer 2

从单选按钮中删除disabled属性可以使其正常工作。 如何制作单选按钮:checked是否已禁用。