在IE8中使用jQuery/JavaScript模拟CSS :only-child选择器

Question

我有一个菜单，使用了:only-child选择器来表示子菜单。:after选择器在IE8中可以工作（这是我需要支持的唯一旧版本），但:only-child选择器不能正常工作，导致箭头出现在每个菜单项上，而不仅仅是带有子菜单的菜单项。

.menu li > a:after { content: ' ▾'; }
.menu li > a:only-child:after { content: ''; }

我希望使用jQuery或JavaScript来实现这个效果。不想使用Modernizr或Selectivizr等其他工具，只需要一个单一的代码作为only-child的替代品。

如果你能帮忙解决问题，我将不胜感激。由于我对jQuery和JavaScript还是新手，所以请详细解释。谢谢！

- mnsth

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

- BoltClock

---

jQuery为您实现了大多数CSS选择器。 - Bhojendra Rauniyar

非常感谢您的回答 - 但是，我无法在IE8仿真模式下使其工作（不幸的是，我没有虚拟机进行测试），但我知道仿真并不总是准确的。 - mnsth

@Simen Mangseth：它在其他浏览器中是否工作，包括IE9/10/11的默认渲染模式？ - BoltClock

@BoltClock 我只在IE8上应用了脚本和CSS，通过将它们放在IE8条件注释(<!--[if lt IE 9]><![endif]-->)中。这不是最好的方法吗？我不想为支持现代浏览器添加额外的JavaScript。 - mnsth

@Simen Mangseth：是的，但在这种情况下，您可以暂时为其他浏览器启用它，以检查它是否有效。如果不起作用，则可能有其他问题。 - BoltClock

Answer 2

对于其他人想知道这个问题并且遇到了与@BoltClock的代码不起作用的相同问题，如果你将$更改为jQuery，它很可能会起作用，像这样：

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

- mnsth