CSS 仅将样式应用于第一级 td 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/613284/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Apply style to only first level of td tags
提问by RichC
Is there a way to apply a Class' style to only ONE level of td tags?
有没有办法将类的样式仅应用于一级 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>
回答by bobince
Is there a way to apply a Class' style to only ONE level of td tags?
有没有办法将类的样式仅应用于一级 td 标签？
Yes*:
是*:
.MyClass>tbody>tr>td { border: solid 1px red; }
But! The ‘>' direct-child selector does not work in IE6. If you need to support that browser (which you probably do, alas), all you can do is select the inner element separately and un-set the style:
但！' >' 直接子选择器在 IE6 中不起作用。如果您需要支持该浏览器（您可能会这样做，唉），您所能做的就是单独选择内部元素并取消设置样式：
.MyClass td { border: solid 1px red; }
.MyClass td td { border: none; }
*Note that the first example references a tbodyelement not found in your HTML. It shouldhave been in your HTML, but browsers are generally ok with leaving it out... they just add it in behind the scenes.
*请注意，第一个示例引用了tbodyHTML 中未找到的元素。它应该在您的 HTML 中，但浏览器通常可以将其省略……他们只是在幕后添加它。
回答by aviko oloo
how about using the CSS :first-child pseudo-class:
如何使用 CSS :first-child 伪类：
.MyClass td:first-child { border: solid 1px red; }
回答by Nick Presta
This style:
这种风格：
table tr td { border: 1px solid red; }
td table tr td { border: none; }
gives me:
给我：
this http://img12.imageshack.us/img12/4477/borders.png
这个 http://img12.imageshack.us/img12/4477/borders.png
However, using a class is probably the right approach here.
但是，在这里使用类可能是正确的方法。
回答by Chuck
Just make a selector for tables inside a MyClass.
只需为 MyClass 中的表创建一个选择器。
.MyClass td {border: solid 1px red;}
.MyClass table td {border: none}
(To generically apply to all inner tables, you could also do table table td.)
（要普遍适用于所有内部表，您也可以这样做table table td。）
回答by prule
I wanted to set the width of the first column of the table, and I found this worked (in FF7) - the first column is 50px wide:
我想设置表格第一列的宽度，我发现这有效（在 FF7 中） - 第一列宽 50px：
#MyTable>thead>tr>th:first-child { width:50px;}
where my markup was
我的标记在哪里
<table id="MyTable">
<thead>
<tr>
<th scope="col">Col1</th>
<th scope="col">Col2</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
回答by uma
I think, It will work.
我认为，它会起作用。
.Myclass tr td:first-child{ }
or
.Myclass td:first-child { }
回答by Simon Buchan
I guess you could try
我想你可以试试
table tr td { color: red; }
table tr td table tr td { color: black; }
Or
或者
body table tr td { color: red; }
where 'body' is a selector for your table's parent
其中“body”是表父级的选择器
But classes are most likely the right way to go here.
但是上课很可能是去这里的正确方式。
