asp.net - TreeView 如何使用 css 在表中选择 2nds tr 以设置完整父节点行的 BackColor

Question

我一直在尝试通过其他帖子的提示找到这个问题的答案 CSS Selector picker/finder?我发现做我想做的最接近的部分解决方案是: http://asp-net-example.blogspot.com/2009/04/how-to-set-change-treeview-parent-node.html

我只需要将所有父节点的背景颜色设置为#F0F0F0正如您在上面的链接中看到的，下面的行只会为父区域设置背景颜色，但不会为整个行设置背景颜色。我想让所有的父节点行都具有相同的背景颜色。

<ParentNodeStyle Font-Bold="False" BackColor="#F0F0F0"/>

我还尝试了 nth-child 的不同组合，包括下面的行，但它不起作用:

table.trvFileTree tr:nth-child(2)
{
background-color: #F0F0F0;

}

我使用了 Dom Inspector 插件，如您所见，我希望所有第二个 trs 都具有特定的背景颜色。

此外，我尝试使用 Firebug 获取第二个 tr 选择器的完整路径:

html body form#form1 div div.fullWidthWrp div.InnerfullWidth div.LCol div.InnerLCol div#trvFileTree.treeViewDim div#trvFileTreen0Nodes table tbody tr

非常感谢您的提前帮助。

注意:无法在 stackoverflow 上发布屏幕截图，因为它需要超过 10 个信誉点。但是，我在 droplr 图像共享网站上发布了我需要的屏幕截图:http://d.pr/i/OVIp

更新(下面的代码几乎与我的代码完全相同，但我决定只为 TreeView 添加代码，以便代码仅显示需要完成的操作):

1) 这是 TreeviewExample.aspx 的完整代码 ideone.com/3PXbSE

2) 这是 TreeviewExample.aspx 的完整渲染标记 ideone.com/wpctLP

3) 这是TreeviewExample.aspx的浏览器 View 截图 d.pr/i/8ni6

正如您将在 #2 中看到的完整代码)与下面呈现的代码几乎相同(具有相同的表结构)

下面的标记是由 treeview 控件生成的代码的一部分，并显示了我想要具有不同背景颜色的父节点行:(从 firebug 复制，仅扩展了一些重要节点，以便标记更容易阅读)

        <div id="trvFileTree" class="treeViewDim" style="width: 100%;">
        <table cellspacing="0" cellpadding="0" style="border-width: 0;">
            <tbody>
                <tr>
                <tr style="height: 0px;">
            </tbody>
        </table>
        <div id="trvFileTreen0Nodes" style="display: block;">
        <table cellspacing="0" cellpadding="0" style="border-width: 0;">
            <tbody>
                <tr style="height: 0px;">
                <tr> <%--This row contains a parent node, and I want to set the background color for all the row--%>
                <tr style="height: 0px;">
            </tbody>
        </table>
        <div id="trvFileTreen1Nodes" style="display: block;">
            <table cellspacing="0" cellpadding="0" style="border-width: 0;">
                <tbody>
                    <tr style="height: 0px;">
                    <tr> <%--This row also contains a parent node, and I want to set the background color for all the row--%>
                    <tr style="height: 0px;">
                </tbody>
            </table>
            <table cellspacing="0" cellpadding="0" style="border-width: 0;"> <%--These tables contain child nodes--%>
            <table cellspacing="0" cellpadding="0" style="border-width: 0;">
        </div>
        <table cellspacing="0" cellpadding="0" style="border-width: 0;">
        <div id="trvFileTreen5Nodes" style="display: none;">
            <table cellspacing="0" cellpadding="0" style="border-width: 0;">
                <tbody>
                    <tr style="height: 0px;">
                    <tr>
                    <tr style="height: 0px;">
                </tbody>
            </table>
        </div>
        <table cellspacing="0" cellpadding="0" style="border-width: 0;">

Answer 1

如果我理解你的问题，我有东西要给你。

试试这个:

table tr:not(:nth-child(2n)){
  background-color: #F0F0F0;   
}

fiddle

来源:

• > CSS3 : not() selector和 nth-child with mod (or modulo) operator