只对第一级 td 标记应用样式

有没有一种方法可以将 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>
253358 次浏览

我想你可以试试

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

或者

body table tr td { color: red; }

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

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

有没有一种方法可以将 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,但浏览器通常没有关于它的问题... 他们只是添加到幕后。

这种风格:

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

给了我:

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

然而,在这里使用类可能是正确的方法。

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

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

(要通用地应用于所有内部表,还可以执行 table table td。)

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

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

我想设置表的第一列的宽度,我发现这个工作(在 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>

我觉得,会成功的。

.Myclass tr td:first-child{ }


or


.Myclass td:first-child { }