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

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

Answer 2

问题

您的问题是所有单选按钮都具有相同的 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 属性，但实际上只有第三个被选中，因为它们都共享相同的 name 属性。具有不同 name 的 "bar" 单选按钮也被选中，因为它不属于 "foo" 组。

修复

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

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

Strange behavior with css pseudo selector :checked

html

css

css-selectors

checked

问题

修复