如何将XPath转换为CSS

Question

我的xpath是：/html/body/div/table/tbody/tr[2]/td[4]

我需要获取一个CSS以在jsoup选择器中使用。

我找到了一篇比较xpath和css的文章：这里，在他们的例子（页面上第二个<E>元素）中说我做不到。Xpath xpath=(//E)[2] CSS N\A。

也许我找不到我要找的东西。有什么想法吗？

这是我正在尝试解析的HTML（我需要获取值：1和3）：

<div class=tablecont>
    <table width=100%>
        <tr>
            <td class=header align=center>Panel Color</td>
            <td class=header align=center>Locked</td>
            <td class=header align=center>Unqualified</td>
            <td class=header align=center>Qualified</td>
            <td class=header align=center>Finished</td>
            <td class=header align=center>TOTAL</td>
        </tr>
        <tr>
            <td align=center>
                <div class=packagecode>ONE</div>
                <div>
                <div class=packagecolor style=background-color:#FC0;></div>
                </div>
            </td>
            <td align=center>0</td>
            <td align=center>0</td>
            <td align=center>1</td>
            <td align=center>12</td>
            <td align=center class=rowhead>53</td>
        </tr>
        <tr>
            <td align=center>
                <div class=packagecode>two</div>
                <div>
                    <div class=packagecolor style=background-color:#C3F;></div>
                </div>
            </td>
            <td align=center>0</td>
            <td align=center>0</td>
            <td align=center>3</td>
            <td align=center>42</td>
            <td align=center class=rowhead>26</td>
        </tr>
    </table>
</div>

- Kamil

---

但是您是否在页面的任何位置寻找第二个元素，还是其父级的第二个子元素？如果是前者，则无法使用CSS完成。 - BoltClock

Answer 1

尽管像 (//E)[2] 这样的表达式无法用 CSS 选择器表示，但可以使用 :nth-of-type() 伪类来模拟像 E[2] 这样的表达式：

html > body > div > table > tbody > tr:nth-of-type(2) > td:nth-of-type(4)

- nwellnhof

Answer 2

对我来说很有效。

//Author: Oleksandr Knyga
function xPathToCss(xpath) {
    return xpath
        .replace(/\[(\d+?)\]/g, function(s,m1){ return '['+(m1-1)+']'; })
        .replace(/\/{2}/g, '')
        .replace(/\/+/g, ' > ')
        .replace(/@/g, '')
        .replace(/\[(\d+)\]/g, ':eq($1)')
        .replace(/^\s+/, '');
}

- Oleksandr Knyga

---

这将/的起始位置翻译为css样式中的>，这是错误的。 - Smit Johnth

对我来说工作得很好！谢谢 - lucaswxp

Answer 3

你是否在寻找类似这样的东西：

http://jsfiddle.net/YZu8D/

.tablecont tr:nth-child(2) td:nth-child(4) {background-color: yellow; }
.tablecont tr:nth-child(3) td:nth-child(4) {background-color: yellow; }

- Steve Wellens

Answer 4

一个人应该学习如何编写CSS选择器，但是为了快速解决问题，请尝试：cssify 例如，我输入了你的XPath，它就会输出：html > body > div > table > tbody > tr:nth-of-type(2) > td:nth-of-type(4) 试试看吧。

- New Guy

---

这是什么意思？@SurajRao - New Guy