我有一个带有 :only-child 选择器的菜单,这样我就可以指示子菜单。 :after 选择器在 IE8 中工作(我必须支持的唯一旧 IE 版本),但 :only-child 选择器不工作,所以我在每个菜单项上都有一个箭头,而不仅仅是在带有子菜单的菜单项上。
.menu li > a:after { content: ' ▾'; }
.menu li > a:only-child:after { content: ''; }
我想要的是使用 jQuery 或 JavaScript 来实现这一点。 我不想使用 Modernizr 或 Selectivizr 以及所有这些东西,只是一个单一的代码作为独生子女的替代品。
如果你能帮助我,我将不胜感激。我是 jQuery 和 JavaScript 的新手,所以请彻底解释。谢谢!
最佳答案
jQuery implements most CSS selectors for you , 包括 :only-child
,这使得使用较新的选择器来定位旧浏览器中的元素变得非常容易。事实上,Selectivizr 依赖于另一个 JavaScript 库,例如 jQuery,以便直接在 CSS 中实现选择器。
如果您可以使用 jQuery,您可以简单地让 jQuery 处理 :only-child
选择器,为唯一的 child 分配一个类,然后您可以使用您的 CSS 规则作为目标。与 Selectivizr 不同,jQuery 只允许您在脚本中使用选择器,而不能直接在样式表中使用选择器1,因此您必须改用类名。
CSS:
.menu li > a:after { content: ' ▾'; }
.menu li > a.only-child:after { content: ''; } /* Notice the class selector */
JS:
$('.menu li > a:only-child').addClass('only-child');
1 Selectivizr 存在一个已知问题,它会阻止您在选择器中组合伪类和伪元素,因此在这种情况下您将无法使用 Selectivizr无论如何。
关于javascript - 伪造 CSS :only-child in IE8 with jQuery/JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19207380/