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

2022-01-10 00:00:00 css-selectors css

有没有办法将一个类的样式只应用到一个级别的 td 标签?

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

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

推荐答案

有没有办法将一个类的样式只应用到一个级别的 td 标签?

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 中不起作用.如果您需要支持该浏览器(唉，您可能会这样做)，您所能做的就是单独选择内部元素并取消设置样式:

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:

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

<小时>

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

*Note that the first example references a tbody element not found in your HTML. It should have been in your HTML, but browsers are generally ok with leaving it out... they just add it in behind the scenes.

相关文章