如何使用CSS在asp.net gridview控件的页导航行生成的html表上设置特定的3td标签的外部样式

Question

使用css生成标记的html表的工作版本如下:http://jsfiddle.net/nexU/JkUCQ/1/

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

提前感谢您的帮助。

/*我想要第一个pagerRow TD宽度10%我想要第二页行TD的宽度80%我想让第3pagerrow 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;
}