Question

我正在尝试使用＆gt; IE7中的CSS子选择器，它似乎不起作用。我有嵌套表。我的外表有一个类名“mytable”，我希望外表的td显示边框。我不希望内表td有边框。

我想我应该能够拥有这样的CSS：

.mytable { border-style: solid }
.mytable>tr>td { border-style: solid }

但第二行似乎没有效果。如果我更改第二行以使其不那么具体，它适用于所有td - 我看到太多边框。

td { border-style: solid }

所以我认为这只是选择器的一个问题。像this这样的页面表明IE7应该能够做我想做的事情。我在做些傻事吗？

以下是整个HTML文件：

<html>
  <head>
    <style type="text/css">
      .mytable { border-style: solid; border-collapse: collapse;}
      td { border-style: solid; }
    </style>
  </head>

  <body>
    <table class="mytable">
      <tr>
        <td>Outer top-left</td>
        <td>Outer top-right</td>
      </tr>
      <tr>
        <td>Outer bottom-left</td>
        <td>
          <table>
            <tr>
              <td>Inner top-left</td>
              <td>Inner top-right</td>
            </tr>
            <tr>
              <td>Inner bottom-left</td>
              <td>Inner bottom-right</td>
            </tr>
          <table>
        </td>
      </tr>
    <table>
  </body>
</html>

Answer 1

除了使用符合标准的模式，您还必须编写

.mytable>tbody>tr>td

因为 - 即使它没有明确写出 - 在tbody和table之间的DOM中有一个tr元素。

Answer 2

根据多个来源，子选择器（＆gt;）应该在IE7中工作。你可以通过使用后代选择器（空格）并为所有更深层次嵌套的元素恢复样式来传递问题：

.mytable { border-style: solid; border-collapse: collapse;}
.mytable tr td { border-style: solid; }
.mytable tr td td{ border-style: none; }

Answer 3

实际上，它可能，你的代码可能不包含＆＃34; tbody＆＃34;元素，但它仍然存在。

正确的css选择器是：

.mytable > tbody > tr > td { border-style: solid }

Answer 4

如果通过：'.mytable>tr>td'你想说“作为.mytable的孩子的tr的孩子的td”那么你不需要＆gt;一点都不

你没试过吗？

.mytable tr td {}

应该做你想要的（如果我理解你的问题）

Answer 5

另外值得注意的是，如果您的doctype未设置，您可能也会遇到此问题。确保你在第1行有一个doctype。我在doctype正上方的第1行有一个html注释，它导致IE7失败。

使用：

<!doctype html>

不起作用：

<!-- Comment -->
<!doctype html>

IE7表中的CSS子选择器

5 个答案: