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

Question

有没有办法将类的样式仅应用于一级 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

Is there a way to apply a Class' style to only ONE level of td tags?

是^*:

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

但是! ‘>’直接子选择器在 IE6 中不起作用。如果您需要支持该浏览器(唉，您可能会这样做)，您所能做的就是单独选择内部元素并取消设置样式:

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

---

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