伪造 CSS :独生子在 IE8 中使用 jQuery/JavaScript

Faking CSS :only-child in IE8 with jQuery/JavaScript

本文关键字：jQuery JavaScript IE8 CSS 独生子伪造更新时间：2023-09-26

我有一个带有：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为您实现了大多数CSS选择器，包括:only-child，这使得使用较新的选择器在较旧的浏览器中定位元素变得非常容易。事实上，Selectivizr 依赖于另一个 JavaScript 库（如 jQuery），以便将选择器直接实现到 CSS 中。

如果你可以使用jQuery，你可以简单地让jQuery处理:only-child选择器，为唯一的子分配一个类，然后你可以用你的CSS规则来定位。与 Selectivizr 不同，jQuery 只允许你在脚本中使用选择器，而不是直接在样式表¹ 中使用选择器，所以你必须使用类名。

.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。}

对于其他对此感到疑惑并且遇到同样问题而无法使@BoltClock的代码正常工作的其他人，如果您将$更改为 jQuery，它很可能会起作用，如下所示：

jQuery("SELECTOR").exampleMethod("EXAMPLESTRING");