Question

我有一些带有嵌套表的遗留布局。

我希望父表的<td>有一种颜色的边框，而内部表没有。

下面：

<html>
  <head>
    <style>
      table tr td{
    border:none;
      }
      table.listTable tr  td
      {
    border:1px solid red;
      }
    </style>
  </head>
  <body>
    <table class="listTable">
      <tr>
    <td>
      left
    </td>

    <td>
      <table style="width:100%;">
        <tr>
          <td>
        1
          </td>
          <td>
        2
          </td>
        </tr>
      </table>
    </td>

    <td>
      right
    </td>
      </tr>
      <tr>
    <td>
      left
    </td>
    <td>
      doubles
    </td>
    <td>
      right
    </td>
      </tr>
    </table>
  </body>
</html>

如何通过修改1 css选择器，使顶部中间单元格中标有2和.listTable的子单元格没有应用红色CSS？

这看起来像我想要的：

table.listTable > tr td

但它完全打破了选择器。

有人可以解释我需要哪个选择器，以及为什么我试过的选择器会破坏布局？

这是关于jsfiddle：http://jsfiddle.net/nvZbq/

Answer 1

查看Firebug中生成的标记或您选择的其他浏览器开发工具。您会看到<tr>不是实际 <table>的子元素。如果您不使用<tbody>，浏览器将为您添加一个。

所以这是使用的选择器：

table.listTable > tbody > tr > td

Answer 2

table.listTable > tbody > tr > td{
    border:1px solid red;
}

在>和tr之间添加td。请记住，它表示直接子节点，因此table.listTable > tbody > tr > td描述的是一个表格单元格（td），它是表格行（tr）的直接子节点，它是具有类listTable的表的直接子节点。其中的嵌套表现在不应该采用该样式。

table.listTable > tr td的原始风格有两个问题。首先，它表示任何td嵌套在表行下面的任何地方，该表行是具有类listTable的表的直接子项。这就是原始样式将红色顶部边框应用于子表的原因。它会对嵌套在根表下面的任何<td>标记执行相同的操作。其次，Matt在下面对我进行了更正，浏览器会在表格中插入<tbody>标签，因此您需要将其包含在CSS选择器链中，否则直接后代规则将无效。（谢谢马特）

希望这有帮助。

Answer 3

问题在于选择器与边框的特殊性。它比没有它的人更具体。

有几种方法可以实现这一目标。

一种方法是将特异性添加到内部表选择器：

table.listTable table tr td

编辑注意：“孩子”与“直接孩子”在'＆gt;'中发挥作用在某些浏览器添加tbody时，在您的选择器中，有些浏览器不添加。

table.listTable tr  td       {     border:1px solid red;       } 
table.listTable table tr td{     border:none;       }

示例：http://jsbin.com/oyihop/edit#javascript,html,live

不了解儿童选择器

3 个答案: