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

Posted 2023-03-06

【中文标题】使用 jQuery/JavaScript 在 IE8 中伪造 CSS :only-child

【英文标题】：Faking CSS :only-child in IE8 with jQuery/JavaScript

【发布时间】：2013-10-12 23:54:06

【问题描述】：

我有一个带有 :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 的新手，所以请详细解释一下。谢谢！

【参考方案1】：

jQuery implements most CSS selectors for you，包括: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无论如何。}

【讨论】：

+1 for 'jQuery 为您实现了大多数 css 选择器'

非常感谢您的回答 - 但是，我无法让它在 IE8 仿真模式下工作（不幸的是，我没有要测试的 VM），但我知道仿真不是始终准确。

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

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

@Simen Mangseth：是的，但在这种情况下，您总是可以暂时为其他浏览器启用它，只是为了检查它是否有效。如果没有，那么可能有其他问题。

【参考方案2】：

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

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