css 伪选择器的奇怪行为 :checked
Strange behavior with css pseudo selector :checked
我正在使用纯 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”验证了这些规则是否正确应用。
有什么想法吗?
提前致谢
从单选按钮中删除 disabled
属性使其工作正常。如果它被禁用,你如何制作一个单选按钮 :checked
。
问题
您的问题是所有单选按钮都具有相同的 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 解决方案在我的网站上显示五颗星的评级。 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”验证了这些规则是否正确应用。
有什么想法吗?
提前致谢
从单选按钮中删除 disabled
属性使其工作正常。如果它被禁用,你如何制作一个单选按钮 :checked
。
问题
您的问题是所有单选按钮都具有相同的 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"
。