html - css 伪选择器 :checked 的奇怪行为

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 属性，但它们的 checkedness 状态 为 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 属性，但实际上只有第三个被选中，因为它们共享相同的 名称 属性。具有不同名称 的“bar” 单选按钮也被选中，因为它不属于“foo” 组。

修复

因此，解决方法是确保不同的单选按钮组具有不同的 name 属性。在您的例子中，所有三个组共享 name:"gl_satisfaction_12"。在这个JSFiddle demo我已将这三个组重命名为 “group_1”、“group_2” 和 “group_3”。