第一个使用 CSSSelector 的匹配元素



所以,我正在尝试对列进行测试Title or Names or DateTime

我正在尝试获取test td 元素,并且我已经使用 CSSSelector 尝试了以下内容:

div#body-inner div#ctl00_ContentPlaceHolder1_Control1_pnlList div table#ctl00_ContentPlaceHolder1_Control1_gv.gv tbody tr.item td:nth-child(4)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head id="ctl00_PageHead">
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Employee</title>
  <body id="ctl00_PageBody">
    <form name="aspnetForm">
      <div>
      </div>
      <div>
      </div>
      <table class="global-table" cellpadding="0" cellspacing="0">
        <tr class="body">
          <td>
            <div id="body">
              <div id="body-inner">
                <h1>
                                    Employee Information</h1>
                <div id="ctl00_ContentPlaceHolder1_Control1_pnlList" style="width: 100%;">
                  &nbsp;
                  <div class='filter'>
                  </div>
                  <div>
                    <table class="gv" cellspacing="0" border="0" id="ctl00_ContentPlaceHolder1_Control1_gv" style="border-collapse: collapse;">
                      <tr class="header">
                        <th class=" nolink" scope="col">
                          &nbsp;
                        </th>
                        <th scope="col">
                          <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$Phone')">
                                                        Phone</a>
                        </th>
                        <th class=" sorted-desc" scope="col">
                          <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$Title')">
                                                        Title</a>
                        </th>
                        <th scope="col">
                          <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$SubTitle')">
                                                        SubTitle</a>
                        </th>
                        <th scope="col">
                          <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$Names')">
                                                        Names</a>
                        </th>
                        <th scope="col">
                          <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$Names')">
                                                        Enames</a>
                        </th>
                        <th scope="col">
                          <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$Active')">
                                                        Active</a>
                        </th>
                        <th scope="col">
                          <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$DateTime')">
                                                        &nbsp;DateTime</a>
                        </th>
                      </tr>
                      <tr class="item">
                        <td align="center">
                          <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$0')">
                                                        Edit</a>
                        </td>
                        <td align="center" style="width: 15px;">
                        </td>
                        <td>
                          Test
                        </td>
                        <td>
                          &nbsp;
                        </td>
                        <td>
                          &nbsp;
                        </td>
                        <td>
                          &nbsp;
                        </td>
                        <td>
                          &nbsp;
                        </td>
                        <td>
                          8/23/2011&nbsp;
                        </td>
                      </tr>
                      <tr class="altItem">
                        <td align="center">
                          <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$1')">
                                                        Edit</a>
                        </td>
                        <td align="center" style="width: 15px;">
                        </td>
                        <td>
                          Test1
                        </td>
                        <td>
                          1
                        </td>
                        <td>
                          Employee
                        </td>
                        <td>
                          &nbsp;
                        </td>
                        <td>
                          &nbsp;
                        </td>
                        <td>
                          7/31/2014
                        </td>
                      </tr>
                      <tr class="item">
                        <td align="center">
                          <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$2')">
                                                        Edit</a>
                        </td>
                        <td align="center" style="width: 15px;">
                        </td>
                        <td>
                          Test2</td>
                        <td>
                          111
                        </td>
                        <td>
                          Employer
                        </td>
                        <td>
                        </td>
                        <td>
                          &nbsp;
                        </td>
                        <td>
                          7/31/2013
                        </td>
                      </tr>
                      <tr class="altItem">
                        <td align="center">
                          <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$3')">
                                                        Edit</a>
                        </td>
                        <td align="center" style="width: 15px;">
                        </td>
                        <td>
                          Test3</td>
                        <td>
                          &nbsp;
                        </td>
                        <td>
                          &nbsp;
                        </td>
                        <td>
                          &nbsp;
                        </td>
                        <td>
                          &nbsp;
                        </td>
                        <td>
                          8/23/2011
                        </td>
                      </tr>
                      <tr class="item">
                        <td align="center">
                          <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$4')">
                                                        Edit</a>
                        </td>
                        <td align="center" style="width: 15px;">
                        </td>
                        <td>
                          Test4</td>
                        <td>
                          2
                        </td>
                        <td>
                          Employer
                        </td>
                        <td>
                          &nbsp;
                        </td>
                        <td>
                          &nbsp;
                        </td>
                        <td>
                          7/31/2012
                        </td>
                      </tr>
                      <tr class="altItem">
                        <td align="center">
                          <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$5')">
                                                        Edit</a>
                        </td>
                        <td align="center" style="width: 15px;">
                        </td>
                        <td>
                          Test5</td>
                        <td>
                          3
                        </td>
                        <td>
                          Employer&nbsp;
                        </td>
                        <td>
                          &nbsp;
                        </td>
                        <td>
                          &nbsp;
                        </td>
                        <td>
                          7/31/2012
                        </td>
                      </tr>
                      <tr class="item">
                        <td align="center">
                          <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$6')">
                                                        Edit</a>
                        </td>
                        <td align="center" style="width: 15px;">
                        </td>
                        <td>
                          Test6
                        </td>
                        <td>
                          a
                        </td>
                        <td>
                          &nbsp;
                        </td>
                        <td>
                          &nbsp;
                        </td>
                        <td>
                          &nbsp;
                        </td>
                        <td>
                          7/20/2012
                        </td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </td>
        </tr>
        <tr class="footer">
          <td>
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>

我得到的结果是所有匹配的元素,但我怎么能只得到test的 td?

<td >
test
</td>
<td >
DEMO TEST OCT 25
</td>
<td class="firefinder-match">
DEMO TEST OCT 25
</td>
<td >
DEMO TEST OCT 25
</td>
<td >
DEMO TEST OCT 25
</td>
<td >
DEMO TEST OCT 25
</td>

问题出在tr.item .该类有多个行,您正在选择所有行。通过使用 first-child 伪类更具体,以便它只选择第一个tr.item而不是所有伪类。

以下是我能够获得的方法:

table#ctl00_ContentPlaceHolder1_Control1_gv.gv tbody tr.item:nth-child(3) > td:nth-of-type(3)

最新更新