样式页面按钮不同于选择按钮答案

【问题标题】：Style Page Buttons Differently than Select Buttons样式页面按钮不同于选择按钮
【发布时间】：2013-07-26 19:32:59
【问题描述】：

我正在尝试设置与选择按钮不同的分页按钮样式。我用于选择按钮的选择器也适用于分页按钮：

.gridView tr td a{} /* I've assigned the gridView class to the GridView */

如何只选择分页按钮？我试过这个：

.gridView tr td table tr td a{} //traced this down using Chrome's Inspect Element

编辑：这是 HTML（用 ASP.NET 编写）

<div class="gridViewContainer">
    <div>
<table class="gridView" cellspacing="0" rules="rows" border="1" id="GridViewName" style="border-collapse:collapse;">
    <tr>
        <th scope="col">&nbsp;</th><th scope="col">FRAME</th><th scope="col">ELEV</th><th scope="col">CW</th><th scope="col">LEVEL</th>
    </tr><tr>
        <td><a href="javascript:__doPostBack(&#39;GridViewName&#39;,&#39;Select$0&#39;)">Select</a></td><td>MT</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr><tr>
        <td><a href="javascript:__doPostBack(&#39;GridViewName&#39;,&#39;Select$1&#39;)">Select</a></td><td>QA</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr><tr>
        <td><a href="javascript:__doPostBack(&#39;GridViewName&#39;,&#39;Select$2&#39;)">Select</a></td><td>QA</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr><tr>
        <td><a href="javascript:__doPostBack(&#39;GridViewName&#39;,&#39;Select$3&#39;)">Select</a></td><td>VX</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr><tr>
        <td><a href="javascript:__doPostBack(&#39;GridViewName&#39;,&#39;Select$4&#39;)">Select</a></td><td>PP</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr><tr>
        <td><a href="javascript:__doPostBack(&#39;GridViewName&#39;,&#39;Select$5&#39;)">Select</a></td><td>PP</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr><tr>
        <td colspan="6"><table>
            <tr>
                <td><span>1</span></td><td><a href="javascript:__doPostBack(&#39;GridViewName&#39;,&#39;Page$2&#39;)">2</a></td><td><a href="javascript:__doPostBack(&#39;GridViewName&#39;,&#39;Page$3&#39;)">3</a></td><td><a href="javascript:__doPostBack(&#39;GridViewName&#39;,&#39;Page$4&#39;)">4</a></td><td><a href="javascript:__doPostBack(&#39;GridViewName&#39;,&#39;Page$5&#39;)">5</a></td><td><a href="javascript:__doPostBack(&#39;GridViewName&#39;,&#39;Page$6&#39;)">6</a></td><td><a href="javascript:__doPostBack(&#39;GridViewName&#39;,&#39;Page$7&#39;)">7</a></td><td><a href="javascript:__doPostBack(&#39;GridViewName&#39;,&#39;Page$8&#39;)">8</a></td><td><a href="javascript:__doPostBack(&#39;GridViewName&#39;,&#39;Page$9&#39;)">9</a></td><td><a href="javascript:__doPostBack(&#39;GridViewName&#39;,&#39;Page$10&#39;)">10</a></td><td><a href="javascript:__doPostBack(&#39;GridViewName&#39;,&#39;Page$11&#39;)">...</a></td>
            </tr>
        </table></td>
    </tr>
</table>

【问题讨论】：

查看我的编辑，添加了 html
你的第二个选择器似乎在这里工作：jsfiddle.net/TCSrf
您是否尝试过在 ASP.NET 中使用 <PagerSettings> 和 <PagerStyle>？
在使用 PagerStyle 时，设置 BackColor 会改变单元格本身的背景颜色，而不是页面按钮/链接。

标签： .net css gridview css-selectors

【解决方案1】：

查看this article，这是一个关于如何设置 GridView 样式的详细演示。

最值得注意的是PagerStyle-CssClass 属性。

【讨论】：