asp.net - 如何使用 CSS 对由 asp.net gridview 控件的寻呼机行生成的 html 表上的特定 3 个 td 标记进行外部样式设置

Question

使用 css 生成标记的 html 表的工作版本在这里：http: //jsfiddle.net/nexU/JkUCQ/1/

如您所见，我需要为外部 css 上的这 3 个特定 TD 标签设置这些对齐和宽度样式，并覆盖由 asp 控件自动生成的样式。

在此先感谢您的帮助。

/* 我希望第一个 pagerRow TD 的宽度为 10% 我希望第二个 pagerRow TD 的宽度为 80% 我希望第三个 pagerRow TD 的宽度为 10%

*/

/------------style.css------------/

.pagerRow
{
    background: #3D6AA2;
    font-weight: normal;
    color: #fff;
    text-align: left;
    height: 30px;
}

.pagerRow td
{
    border: solid 1px red;
}

/ ------------控件生成的html部分------------ /

<table id="mainContacts" class="contactsBase" cellspacing="0" border="1" style="width: 100%;">
    <tbody>
        <tr class="header_row">
        </tr>
        <tr class="odd">
        </tr>
        <tr class="even">
        </tr>
        <tr class="odd">
        </tr>
        <tr class="even">
        </tr>
        <tr class="odd">
        </tr>
        <tr class="even">
        </tr>
        <tr class="odd">
        </tr>
        <tr class="even">
        </tr>
        <tr class="odd">
        </tr>
        <tr class="even">
        </tr>
        <tr class="odd">
        </tr>
        <tr class="pagerRow" align="center">
            <td colspan="5">
                <table cellspacing="0" cellpadding="0" border="0" width="100%">
                    <tbody>
                        <tr>
                            <td align="left" width="25%"> <!--How to set these align and width styles on external css and override these ones that are automatically generated by asp control?-->
                            </td>
                            <td align="center" width="50%"> <!--How to set these align and width styles on external css and override these ones that are automatically generated by asp control?-->
                                <p> 1,2,3,4,5 </p>
                            </td>
                            <td align="right" width="25%"> <!--How to set these align and width styles on external css and override these ones that are automatically generated by asp control?-->
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

工作小提琴： http: //jsfiddle.net/JkUCQ/4/
（根据您的新输入更新）

将此添加到您的 CSS 中：

.pagerRow tr td:nth-child(1) {
    width:10% !important;
}
.pagerRow tr td:nth-child(2) {
    width:80% !important;
}
.pagerRow tr td:nth-child(3) {
    width:10% !important;
}