Question

我有兴趣构建一个向后兼容的菜单栏。我只想使用HTML和CSS。所以我在想一个包含多个单元格的表格，每个单元格都设置了不同的bkgnd颜色，具体取决于它的状态。有点像....

a:link {
.cell01{background-color:#white};
.cell02{background-color:#white};
}

a:hover {
.cell01{background-color:#red};
.cell02{background-color:#blue};
}

（我正在考虑这样的事情，因为我想要整个单元格，而不仅仅是单元格中的文本要受影响）。显然这个例子不起作用......但有没有办法？

提前致谢

贾尔斯

Answer 1

无论如何，你可能不应该想到一张桌子。您可以轻松地设计UL样式以获得导航的外观，这在语义上更正确。

无论如何 - 从上面的CSS我想你有一个表链接？如果是这样，那么正确的语法将是：

a:link .cell01 { background-color: #fff; }
a:hover .cell01 { background-color: #f00; }

等等

（如果你想使用颜色名称，那么你不使用＃符号。如果你使用十六进制值，那么使用＃，就像我上面所做的那样。）

或者你在细胞内有链接吗？在这种情况下，您可以切换项目，例如

.cell01 a:link {background-color: white; }

希望它有所帮助！

<强>更新

啊 - 史蒂夫上面的回答让我对你要做的事情有了更好的了解......你在表格单元格中有链接，你希望整个单元格在盘旋时改变吗？然后简单地说：

.cell01 { background-color: #fff; }
.cell02:hover { background-color: #f00; }

请注意，这在IE6上无法正常工作，因为仅在IE6中A元素具有悬停状态。你可以通过在Javascript中添加一个额外的类来解决这个问题......

Answer 2

首先：不要使用表格进行布局或导航。没有必要这样做。 UL通常是完成任务的最佳选择。第二：根据需要设置元素块级别和一些填充和样式：http://kod.as/lab/nav/

请参阅http://css.maxdesign.com.au/listamatic/了解详情。

Answer 3

如果要影响整个单元格，则需要将css应用于父级。然后，子<a>标签可以单独行动。像这样：

parentCell { background:white; }

parent1:hover { background:red }
parent2:hover { background:blue }

parent1:hover a { font-weight:bold }
parent2:hover a { font-style:italic }

Answer 4

我假设您的HTML看起来像这样：

<table>
   <td class="cell1">
       <a href="#">Link</a>
   </td>
   <td class="cell2">
       <a href="#">Link</a>
   </td>
</table>

如果是这种情况，那么单独使用HTML和CSS是不可能的。 CSS不允许您以任何方式定位选择器的父级。 JQuery可以使用.parent（）

来做你想要的

伪类中的类

4 个答案: