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

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; }

^*请注意,第一个示例引用了tbodyHTML中未找到的元素.它应该在您的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; }

给我:

这个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.)