jQuery选择器，css路径替换：eq

Question

我的JavaScript脚本存在问题。

我需要将我使用工具设置的CSS样式导出到浏览器可读的CSS文件。 JavaScript函数获取我更改的元素的路径并返回如下内容：

html>body>div:eq(2)>div>div:eq(1)>article>div>div>p:eq(1){text-decoration:underline;}

该路径适用于jQuery选择器，但在CSS文件中无效。

我已尝试将:eq元素替换为:nth-child，但尽管它是有效的CSS文件，但样式将不适用。

我做错了什么？ 我如何将我的：eq转换为css理解的东西。

Answer 1

您可以在 RegExp 中传递第二个参数标记进行全局搜索：

  

new RegExp（pattern [，flags]）

使用：

var regExp = new RegExp('(:eq)','g');

<强> Working Demo

Answer 2

好一阵子后，我找到了答案，我想做的事情无法用css完成。

：eq jQuery选择器无法在纯CSS中翻译。

当第n个孩子开始计数为1时，jQuery元素为0。

据我所知，如果我们有这样的HTML

<div>
    <div id="ele1" class="foo"></div>
    <div id="ele2" class="foo"></div>
    <div id="ele3" class="foo"></div>
</div>

选择器.foo：eq（0）返回＃ele1，而我们需要.foo：nth-​​child（1）来获取相同的元素。 如果我们将dom转换为

<div>
    <div id="ele0"></div>
    <div id="ele1" class="foo"></div>
    <div id="ele2" class="foo"></div>
    ...
</div>

与eq（0）相同的选择器将返回＃ele1，而nth-child（1）将不返回任何内容，因为容器的第一个子节点不匹配.foo。

事实上，如果我们尝试获得nth-child（2），在第一种情况下我们得到＃ele2，但在第二种容器中将返回＃ele1。

因为第n个孩子从父母中选择与选择器匹配的n元素。