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属性，但这些属性上的检查状态是false，因为后者优先。

举个例子：

＆＃13;

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

＆＃13;

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

修复

因此，修复是为了确保您的不同组的单选按钮具有不同的"foo"属性。在您的情况下，所有三个群组都共享name：name。在此JSFiddle demo我已将这三个群组重命名为"gl_satisfaction_12"，"group_1"和"group_2"。

Answer 2

从单选按钮中删除disabled属性使其正常工作。如果它被禁用，你如何制作单选按钮:checked。

使用css伪选择器的奇怪行为：已选中

2 个答案:

问题

修复