html - 伪类中的类

Question

我对构建向后兼容的菜单栏很感兴趣。我只想使用 HTML 和 CSS。所以我在想一个包含多个单元格的表格，每个单元格根据其状态设置不同的背景颜色。类似于....

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

希望对您有所帮助!

---

更新:

啊 - Steve 上面的回答让我更好地了解了您正在尝试做什么...您在表格单元格中有链接，并且您希望整个单元格在悬停时发生变化？然后简单地:

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

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