如何将 Xpath 转换为 CSS

Posted 2023-03-06

【中文标题】如何将 Xpath 转换为 CSS

【英文标题】：How to convert Xpath to CSS

【发布时间】：2013-03-21 19:30:01

【问题描述】：

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

我需要一个 CSS 才能在 jsoup 选择器中使用它。

我找到了 xpath 和 css 之间的比较：here，在他们的示例 (Second <E> element anywhere on page) 中说我做不到。 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>

【问题讨论】：

但是您是在页面上的任何位置寻找第二个元素，还是在其父元素的第二个子元素？如果是前者，用CSS是做不到的。

【参考方案1】：

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

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

【参考方案2】：

您是否正在寻找这样的东西：

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; 

【参考方案3】：

对我有好处。

//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+/, '');

【讨论】：

这会将 css 的起始 / 转换为起始 >，这是错误的。

对我来说没问题！谢谢

【参考方案4】：

应该学习如何编写 CSS 选择器，但为了快速解决问题，请尝试：cssify

例如，我输入你的 xpath 并吐出：html > body > div > table > tbody > tr:nth-of-type(2) > td:nth-of-type(4)

试试看。

【讨论】：

类似的东西？ @SurajRao