使用CSS选择器按下一个元素提取跨度文本

Question

我有这段html

<div class="crtoolbar" style="display:inline-block;height:26px;width:1080px;top:0px;left:0px;">
    <table cellspacing="0" cellpadding="0">
        <tbody>
            <tr nowrap="">
                <td nowrap="" width="8">&nbsp;</td>
                <td nowrap="" width="22px">
                    <input type="image" name="ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl01" title="Print" src="/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/print.gif" onmouseover="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/print_over.gif'" onmouseout="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/print.gif'" style="height:22px;width:22px;border-width:0px;">
                </td>
                <td nowrap="" width="8">&nbsp;</td>
                <td nowrap="" width="22px">
                    <input type="image" name="ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl04" disabled="disabled" title="First" src="/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/firstd.gif" onmouseover="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/firstd.gif'" onmouseout="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/firstd.gif'" style="height:22px;width:22px;border-width:0px;">
                </td>
                <td nowrap="" width="4">&nbsp;</td>
                <td nowrap="" width="22px">
                    <input type="image" name="ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl05" disabled="disabled" title="Prev" src="/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/prevd.gif" onmouseover="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/prevd.gif'" onmouseout="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/prevd.gif'" style="height:22px;width:22px;border-width:0px;">
                </td>
                <td nowrap="" width="8">&nbsp;</td>
                <td nowrap="" width="22px">
                    <input type="image" name="ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl06" title="Next" src="/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/next.gif" onmouseover="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/next_over.gif'" onmouseout="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/next.gif'" style="height:22px;width:22px;border-width:0px;">
                </td>
                <td nowrap="" width="8">&nbsp;</td>
                <td nowrap="" width="22px">
                    <input type="image" name="ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl07" title="Last" src="/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/last.gif" onmouseover="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/last_over.gif'" onmouseout="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/last.gif'" style="height:22px;width:22px;border-width:0px;">
                </td>
                <td nowrap="" width="4">&nbsp;</td>
                <td nowrap="" valign="middle" align="center" width="60px">
                    <span style="display:inline-block;width:60px;">1&nbsp;/&nbsp;5</span>
                </td>
                <td nowrap="" width="8">&nbsp;</td>
                <td nowrap="" width="40px">
                    <input name="ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl09" type="text" title="Go To" class="crtoolbartextbox" onkeypress="if ((event.which &amp;&amp; event.which == 13) || (event.keyCode &amp;&amp; event.keyCode == 13)) { document.getElementById('ctl00_ContentPlaceHolder1_CrystalReportViewer1_ctl02_ctl10').click(); return false;}" style="height:16px;width:40px;">
                </td>
                <td nowrap="" width="1">&nbsp;</td>
                <td nowrap="" width="22px">
                    <input type="image" name="ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl10" id="ctl00_ContentPlaceHolder1_CrystalReportViewer1_ctl02_ctl10" title="Go To" src="/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/gotopage.gif" onmouseover="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/gotopage_over.gif'" onmouseout="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/gotopage.gif'" style="height:22px;width:22px;border-width:0px;">
                </td>
                <td nowrap="" width="8">&nbsp;</td>
                <td nowrap="" width="95px">
                    <input name="ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl13" type="text" title="Find" class="crtoolbartextbox" onkeypress="if ((event.which &amp;&amp; event.which == 13) || (event.keyCode &amp;&amp; event.keyCode == 13)) { document.getElementById('ctl00_ContentPlaceHolder1_CrystalReportViewer1_ctl02_ctl14').click(); return false;}" style="height:16px;width:95px;">
                </td>
                <td nowrap="" width="1">&nbsp;</td>
                <td nowrap="" width="22px">
                    <input type="image" name="ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl14" id="ctl00_ContentPlaceHolder1_CrystalReportViewer1_ctl02_ctl14" title="Find" src="/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/search.gif" onmouseover="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/search_over.gif'" onmouseout="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/search.gif'" style="height:22px;width:22px;border-width:0px;">
                </td>
                <td nowrap="" width="8">&nbsp;</td>
                <td nowrap="" width="">
                    <select name="ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl15" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl15\',\'\')', 0)" title="Zoom" class="crtoolbarlist" style="height:22px;">
                        <option value="25">25%</option>
                        <option value="50">50%</option>
                        <option value="75">75%</option>
                        <option selected="selected" value="85">85%</option>
                        <option value="100">100%</option>
                        <option value="125">125%</option>
                        <option value="150">150%</option>
                        <option value="200">200%</option>
                        <option value="300">300%</option>
                        <option value="400">400%</option>
                    </select>
                </td>
                <td nowrap="" width="100%"></td>
            </tr>
        </tbody>
    </table>
</div>

我需要使用CSS选择器来依赖此元素

.FindElementByCss("[name='ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl07']")

以下是span标签所需部分的快照，需要提取该快照

所以最后我需要提取</span></td>之前的数字，这里是5，如图所示

Answer 1

您可以使用

的attribute =值选择器

[style='display:inline-block;width:60px;']

然后使用split或replace在/

之后获得5

其他地方也存在相同的信息，您可以使用的类选择器

.crtoolbar

然后拆分该内容的innerText：

Split(element.innerText, Chr$(32))(2)

最后一个将比任何xpath都快（除非使用非常旧的IE版本，在这种情况下可能会更快或更基本）。

Answer 2

有几种方法可以做到这一点。我将列出一些XPath，您可以选择最适合您目的的一个。

在包含“ /”的导航面板中找到SPAN

//div[@class='crtoolbar']//span[contains(.,'/')]

在“最后一个”按钮之后找到SPAN（使用title =“ Last”）

//input[@title='Last']//following::span[1]

在“最后一个”按钮后找到SPAN（根据您的要求使用名称）

//input[@name='ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl07']//following::span[1]

所有这些都将返回“ 1/5”。从那里，您可以将字符串用“ /”分割，然后使用第二部分得到您的“ 5”或第二个数字碰巧的数字。

顺便说一句，我全都是CSS选择器，但是您不能在这里使用一个，因为您要用作定位器的定位器位于DOM的另一个分支中。在这里使用XPath可以让您通过包含的文本（例如“ /”）或DOM导航（例如， “以下：： *”，等等。