javascript - 使用 jQuery/JavaScript 在 IE8 中伪造 CSS :only-child

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 为您实现了大多数 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');

---

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

Answer 2

对于其他想知道这一点并且有同样问题没有让@BoltClock 的代码工作的人，如果你更改$为，它很可能会工作jQuery，如下所示：

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