javascript - 伪造 CSS :only-child in IE8 with jQuery/JavaScript

Question

我有一个带有 :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 的新手，所以请彻底解释。谢谢!

Answer 1

jQuery implements most CSS selectors for you , 包括 :only-child ，这使得使用较新的选择器来定位旧浏览器中的元素变得非常容易。事实上，Selectivizr 依赖于另一个 JavaScript 库，例如 jQuery，以便直接在 CSS 中实现选择器。

如果您可以使用 jQuery，您可以简单地让 jQuery 处理 :only-child 选择器，为唯一的 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');

---

¹ _{Selectivizr 存在一个已知问题，它会阻止您在选择器中组合伪类和伪元素，因此在这种情况下您将无法使用 Selectivizr无论如何。}