Question

有没有办法将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>

Answer 1

有没有办法将Class'样式应用于只有一级td标签？

是^*：

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

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

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

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

Answer 2

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

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

Answer 3

这种风格：

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

给了我：

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

但是，使用课程可能是正确的方法。

Answer 4

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

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

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

Answer 5

我想设置表格第一列的宽度，我发现这有效（在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>

Answer 6

我认为，它会奏效。

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }

Answer 7

我想你可以试试

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

或者

body table tr td { color: red; }

其中'body'是表格父级的选择器

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

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

7 个答案: