html - 如何应用将被 tfoot 或 last TR 忽略的 CSS 样式

Question

看下面的CSS

.webgrid-table td:nth-child(1),th:nth-child(1)
 {
   display:none
 }

我只是想知道如何应用一种样式，该样式将应用于除 last tr 或 tfoot 之外的所有 tr。用那种 CSS 指导我。

下面的 html 是我的表格的示例 html。

<table class="webgrid-table" data-swhgajax="true" data-swhgcontainer="gridContent" data-swhgcallback="initScripts">
    <thead>
        <tr class="webgrid-header">
            <th scope="col">
                <a data-swhglnk="true" href="http://localhost:13562/WebGrid_Sample2/Show2?sort=ID&amp;sortdir=DESC&amp;page=1">ID ▲</a>
            </th>
            <th scope="col">
                <a data-swhglnk="true" href="http://localhost:13562/WebGrid_Sample2/Show2?sort=FirstName&amp;sortdir=ASC&amp;page=1">First Name</a>
            </th>
            <th scope="col">
                <a data-swhglnk="true" href="http://localhost:13562/WebGrid_Sample2/Show2?sort=LastName&amp;sortdir=ASC&amp;page=1">Last Name</a>
            </th>
            <th scope="col">
                <a data-swhglnk="true" href="http://localhost:13562/WebGrid_Sample2/Show2?sort=StateName&amp;sortdir=ASC&amp;page=1">State Name</a>
            </th>
            <th scope="col">
                <a data-swhglnk="true" href="http://localhost:13562/WebGrid_Sample2/Show2?sort=CityName&amp;sortdir=ASC&amp;page=1">City Name</a>
            </th>
            <th scope="col">
                IsActive
            </th>
        </tr>
    </thead>
    <tfoot>
        <tr class="webgrid-footer">
            <td colspan="6">
                <div id="content">

                    <div id="pager">
                        <ul class="paginate pag5 clearfix">
                            <li class="single">Page 5 of 5 of 50</li>
                            <li class="navpage"><a href="http://localhost:13562/SamplePager/Index">prev</a></li>
                            <li class="navpage"><a href="http://localhost:13562/SamplePager/Index">next</a></li>
                            <li><a href="http://localhost:13562/SamplePager/Index">1</a></li>
                            <li><a href="http://localhost:13562/SamplePager/Index">2</a></li>
                            <li><a href="http://localhost:13562/SamplePager/Index">3</a></li>
                            <li><a href="http://localhost:13562/SamplePager/Index">4</a></li>
                            <li><a href="http://localhost:13562/SamplePager/Index">5</a></li>
                            <li class="current">6</li>
                            <li class="navpage"><a href="">next</a></li>
                            <li class="navpage"><a href="">last</a></li>
                            <li class="single"><div id="loader">Loading....</div></li>
                        </ul>
                    </div>


                </div>
            </td>
        </tr>
    </tfoot>
    <tbody>
        <tr class="webgrid-row-style">
            <td class="SmallCols">1</td>
            <td class="NameColWidth">Amit</td>
            <td class="NameColWidth">Ghosh</td>
            <td class="NameColWidth">West Bengal</td>
            <td class="NameColWidth">Kolkata</td>
            <td class="text-center checkbox-width SmallCols">
                <input type="checkbox" id="select" class="box" name="select" checked="'checked'" value="True">
            </td>
        </tr>
        <tr class="webgrid-alternating-row">
            <td class="SmallCols">2</td>
            <td class="NameColWidth">Tridip</td>
            <td class="NameColWidth">Bhattacharjee</td>
            <td class="NameColWidth">Bihar</td>
            <td class="NameColWidth">DharBganga</td>
            <td class="text-center checkbox-width SmallCols">
                <input type="checkbox" id="select" class="box" name="select" checked="'checked'" value="True">
            </td>
        </tr>
        <tr class="webgrid-row-style">
            <td class="SmallCols">3</td>
            <td class="NameColWidth">Dipyendu</td>
            <td class="NameColWidth">Majumdar</td>
            <td class="NameColWidth">Orissa</td>
            <td class="NameColWidth">Puri</td>
            <td class="text-center checkbox-width SmallCols">
                <input type="checkbox" id="select" class="box" name="select" value="False">
            </td>
        </tr>
        <tr class="webgrid-alternating-row">
            <td class="SmallCols">4</td>
            <td class="NameColWidth">Arijit</td>
            <td class="NameColWidth">Banerjee</td>
            <td class="NameColWidth">West Bengal</td>
            <td class="NameColWidth">Barrack Pore</td>
            <td class="text-center checkbox-width SmallCols">
                <input type="checkbox" id="select" class="box" name="select" value="False">
            </td>
        </tr>
        <tr class="webgrid-row-style">
            <td class="SmallCols">5</td>
            <td class="NameColWidth">Madhabi</td>
            <td class="NameColWidth">Sinha</td>
            <td class="NameColWidth">West Bengal</td>
            <td class="NameColWidth">Ranaghat</td>
            <td class="text-center checkbox-width SmallCols">
                <input type="checkbox" id="select" class="box" name="select" checked="'checked'" value="True">
            </td>
        </tr>
    </tbody>
</table>

谢谢

Answer 1

像这样使用不同的选择器，它不包括 tfoot:

.webgrid-table thead td:first-child,
.webgrid-table thead th:first-child,
.webgrid-table tbody td:first-child,
.webgrid-table tbody th:first-child {
  display: none;
}

您还在第二条规则中保留了 .webgrid-table，因此它适用于所有表，tr:first-child。我还用更兼容的 :first-child 替换了 :nth-child(1)。