仅将样式应用于第一级 td 标签答案

【问题标题】：Apply style to only first level of td tags仅将样式应用于第一级 td 标签
【发布时间】：2010-10-11 10:15:56
【问题描述】：

有没有办法将一个类的样式只应用于一个级别的 td 标签？

<style>.MyClass td {border: solid 1px red;}</style>

<table class="MyClass">
  <tr>
    <td>
      THIS SHOULD HAVE RED BORDERS
    </td>
    <td>
      THIS SHOULD HAVE RED BORDERS
      <table><tr><td>THIS SHOULD NOT HAVE ANY</td></tr></table>
    </td>
  </tr>
</table>

【问题讨论】：

标签： css css-selectors

【解决方案1】：

我想你可以试试

table tr td { color: red; }
table tr td table tr td { color: black; }

或者

body table tr td { color: red; }

'body' 是表父级的选择器

但是上课很可能是去这里的正确方式。

【讨论】：

【解决方案2】：

有没有办法将一个类的样式只应用于一个级别的 td 标签？

是^*：

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

但是！ “>”直接子选择器在 IE6 中不起作用。如果您需要支持该浏览器（唉，您可能会这样做），您所能做的就是单独选择内部元素并取消设置样式：

.MyClass td { border: solid 1px red; }
.MyClass td td { border: none; }

^*请注意，第一个示例引用了 HTML 中未找到的 tbody 元素。它应该在您的 HTML 中，但浏览器通常可以忽略它......他们只是在幕后添加它。

【讨论】：

想起一个我们必须为 IE6 进行调试的世界，我不寒而栗。这篇文章让人不寒而栗..

【解决方案3】：

这种风格：

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

给我：

this http://img12.imageshack.us/img12/4477/borders.png

但是，在这里使用类可能是正确的方法。

【讨论】：

在每个 td 元素上使用一个类可能有点多余，您可能会在包含的表元素上使用一个类，然后您仍然必须排除第二级表 - 即你的第一个例子是正确的。

【解决方案4】：

只需为 MyClass 中的表创建一个选择器。

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

（一般适用于所有内表，您也可以使用table table td。）

【讨论】：

【解决方案5】：

如何使用 CSS :first-child 伪类：

.MyClass td:first-child { border: solid 1px red; }

【讨论】：

那行不通。这会选择.MyClass 的子树中的所有td 子元素，它们是它们的第一个包含元素，因此也将设置内部td 的样式。
这怎么会有这么多赞？ :first-child肯定不会有OP想要的效果。

【解决方案6】：

我想设置表格第一列的宽度，我发现这可行（在 FF7 中） - 第一列是 50px 宽：

#MyTable>thead>tr>th:first-child { width:50px;}

我的标记在哪里

<table id="MyTable">
 <thead>
  <tr>
   <th scope="col">Col1</th>
   <th scope="col">Col2</th>
  </tr>
 </thead>
 <tbody>
   ...
 </tbody>
</table>

【讨论】：

【解决方案7】：

我想，它会起作用的。

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }

【讨论】：

第一个选择每一行的第一个td，第二个只选择页面的第一个td吗？
@JoshuaPinter 你对第一个基本上是正确的。一般来说，td:first-child 选择任何td 元素，它是其父元素下的第一个元素（无论其父元素是什么）。第一个tr td:first-child 添加了td 也必须嵌套在tr 下方的条件（在任何级别，不一定是直接后代）。 tr > td:first-child 选择td，它是tr 正下方的第一个元素。所以最终:first-child与OP问题的解决方案无关，这个答案是不正确的。