涉及祖先中数据-*值的CSS规则在数据-*值更改时与IE不起作用
@重复标志：问题与旧问题相似，但不同。首先，他的问题是IE8，在IE9、10和11中得到了解决。我的是IE 10和11 我在下面有一个赤裸裸的概念验证页面来展示我在说什么 基本上，我正在尝试使用HTML5 data-*属性来增强页面的语义，并使用css规则来设计显示样式，而不是使用javaScript的显示/隐藏逻辑 下面的代码在Firefox/Chrome中运行良好，但在InternetExplorer10和11中失败 我想我可以使用父类中的类来获得类似的行为，但HTML5属性似乎更适合于此，我无法让它们与IE bug一起工作 有什么见解吗涉及祖先中数据-*值的CSS规则在数据-*值更改时与IE不起作用,css,html,internet-explorer,Css,Html,Internet Explorer,@重复标志：问题与旧问题相似，但不同。首先，他的问题是IE8，在IE9、10和11中得到了解决。我的是IE 10和11 我在下面有一个赤裸裸的概念验证页面来展示我在说什么 基本上，我正在尝试使用HTML5 data-*属性来增强页面的语义，并使用css规则来设计显示样式，而不是使用javaScript的显示/隐藏逻辑 下面的代码在Firefox/Chrome中运行良好，但在InternetExplorer10和11中失败 我想我可以使用父类中的类来获得类似的行为，但HTML5属性似乎更适合于此，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.Container[data-Verbose="Yes"] .NotVerbose
{
display: none;
}
.Container[data-Verbose="No"] .Verbose
{
display: none;
}
</style>
</head>
<body>
<div class="Container" data-Verbose="Yes">
<a class="Verbose">Not Verbose Please</a>
<a class="NotVerbose">Verbose Please</a>
<p class="Verbose">*Long Paragraph*</p>
<p class="NotVerbose">*Short Sentence*</p>
</div>
<script src="jquery-1.11.1.min.js"></script>
<script>
jQuery(document).on('click', '.Container a', function(Event) {
var Target = jQuery(this);
console.log(Target);
if(Target.is('.Verbose'))
{
jQuery('.Container').attr('data-Verbose', 'No');
}
else if(Target.is('.NotVerbose'))
{
jQuery('.Container').attr('data-Verbose', 'Yes');
}
});
</script>
</body>
</html>
.Container[data Verbose=“Yes”].NotVerbose
{
显示：无；
}
.Container[data Verbose=“No”].Verbose
{
显示：无；
}
请不要啰嗦
请长篇大论
*长段落*
*短句*
jQuery（文档）.on（'click'，'Container a'，函数（事件）{
var Target=jQuery（this）；
控制台日志（目标）；
if（Target.is（'.Verbose'））
{
jQuery（'.Container'）.attr（'data-Verbose'，'No'）；
}
else if（Target.is（'.NotVerbose'））
{
jQuery（'.Container'）.attr（'data-Verbose'，'Yes'）；
}
});
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
vs-因此，没有通过更改
data-*