无线电输入的input[checked] CSS选择器在IE7中不匹配
我试图将带有选中属性的无线电按钮的样式应用到标签上，但我尝试的所有内容都无法在IE7上匹配。
示例(JSFiddle)：
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style type="text/css">
/* Ensure that + selectors work */
input + span { color: blue; }
/* Try [checked] alone */
input[checked] + span { color: red; }
/* Try selecting by value */
input[checked="checked"] + span { color: green; }
</style>
</head>
<body>
<form>
<input type="radio" checked="checked" name="x" /><span>One</span>
<input type="radio" name="x" /><span>Two</span>
<input type="radio" name="x" /><span>Three</span>
</form>
</body>
</html>所有跨域的文本都是蓝色的，但是第一个在IE7中既不是红色也不是绿色(在IE11中都是本地文本和仿本文本)。我会需要JS黑客，还是有一些技巧，我可以使用CSS来实现这一工作？
回答 1
Stack Overflow用户
发布于 2015-01-26 21:14:10
这太奇怪了。IE7支持属性选择器(至少是基本的)。它必须是特定于选中属性的东西。如果将选中的属性更改为任何其他属性名称(有效与否)，则选择器工作。只需尝试删除“ed”，使其“检查”，并且存在和平等的选择器工作。不确定这是否与IE7在解析文档时没有设置defaultChecked DOM (而不是HTML)属性有关。
Internet 8及更高版本的在IE8模式下，对选中的内容属性的解析操作总是同时影响选中的内容属性和defaultChecked DOM属性。例如，removeAttribute(' checked ')将设置为false。类似地，setAttribute(“选中”、“选中”)将两个DOM属性设置为true (就像元素被重新解析一样)。
来自：https://msdn.microsoft.com/en-us/library/ie/ms533715(v=vs.85).aspx
如果您有很大的需求(许多元素)，您可以尝试为IE6-IE8加载Selectivizr -条件加载( Selectivizr支持的内容)：
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="libs/selectivizr.js"></script>
<![endif]-->如果您只有一两个位置，则可以使用jQuery (或普通JavaScript)事件处理程序。这不是我通常写这个的方式，但我通常的方法在IE7中不起作用；这是唯一的--在IE7中工作的方法：
$('input[name="x"]').on('change', function(){
$('input[name="x"]').siblings('span').removeClass('red');
$(this).next('span').addClass('red');
});CSS：
.red{
color:red;
}https://stackoverflow.com/questions/28156973
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号