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

136

有没有一种方法可以将Class样式仅应用于一个级别的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

— 瑞奇
source

221

有没有一种方法可以将Class样式仅应用于一个级别的td标签？

是^*：

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

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

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

^*请注意，第一个示例引用了tbody在HTML中找不到的元素。它应该已经存在于您的HTML中，但是浏览器通常可以省略它……他们只是将其添加到幕后。

— 博宾斯
source

1

我不禁要记住一个世界，我们必须为IE6进行调试。这篇帖子

— 使人感到

35

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

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

— 奥维科
source

16

那行不通。这将选择td子树中所有子.MyClass元素为其子元素的第一个子元素，因此还将设置inner的样式td。

— Lazlo 2012年

1

怎么会有这么多投票？ :first-child绝对不会达到OP正在寻找的效果。

— plong0 '18

8

这种风格：

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

给我：

这个http://img12.imageshack.us/img12/4477/borders.png

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

— 尼克·普雷斯塔
source

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

— thomasrutter

6

只需为MyClass内的表创建选择器。

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

（要通用地应用于所有内部表，您也可以这样做table table td。）

— 卡盘
source

3

我想设置表格的第一列的宽度，并且我发现这行得通（在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>

— 预定义规则
source

3

我认为，它将起作用。

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }

— 乌玛
source

是第一个选择td每行的第一行，第二个仅选择td页面的第一行吗？

— 约书亚·品特

@JoshuaPinter，您基本上对第一个是正确的。通常，td:first-child选择任何td元素作为其父元素下的第一个元素（无论其父元素是什么）。第一个tr td:first-child添加了以下条件：td必须将嵌套在a之下tr（在任何级别，不一定是直接后代）。 tr > td:first-child选择一个作为td，直接位于下方的第一个元素tr。因此，最终:first-child与OP的问题的解决方案无关，并且此答案是错误的。

— plong0

2

我想你可以尝试

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

要么

body table tr td { color: red; }

其中“ body”是表父级的选择器

但是上课很可能是正确的选择。

— 西蒙·布坎（Simon Buchan）
source