Joh*_*ohn 4 css css-selectors internet-explorer-7
我试图在IE7中使用> CSS子选择器,它似乎不起作用.我有嵌套表.我的外表有一个类名"mytable",我希望外表的td显示边框.我不希望内表td有边框.
我想我应该能够拥有如下所示的CSS:
.mytable { border-style: solid }
.mytable>tr>td { border-style: solid }
但第二行似乎没有效果.如果我更改第二行以使其不那么具体,它适用于所有td - 我看到太多边框.
td { border-style: solid }
所以我认为这只是选择器的一个问题.像这样的页面表明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>
除了使用符合标准的模式,您还必须编写
.mytable>tbody>tr>td
因为 - 即使它没有明确写出 - tbody在DOM table和之间的DOM中有一个元素tr.
根据多个消息来源，子选择器 (>) 应该在 IE7 中工作。您可以通过使用后代选择器（空格）并恢复所有更深层嵌套元素的样式来绕过该问题：
.mytable { border-style: solid; border-collapse: collapse;}
.mytable tr td { border-style: solid; }
.mytable tr td td{ border-style: none; }
| 归档时间： |
|
| 查看次数： |
4699 次 |
| 最近记录： |