僞類中的類

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

我假設你的HTML看起來像這樣：

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

如果是這樣的情況下，僅使用HTML和CSS你問是不可能的。 CSS不允許你以任何方式定位選擇器的父母。 JQuery可以做你正在問的使用.parent（）

Answer 2

如果你想影響整個單元格，你需要將CSS應用到父級。然後，孩子的標籤可以單獨行動。類似這樣的：

parentCell { background:white; } 

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

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

Answer 3

無論如何你可能不應該想到一個表。你可以很容易地設計一個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中只有一個元素具有懸停狀態。您可以通過在Javascript中添加額外的類來解決此問題（如有必要）...

Answer 4

第一：不要使用表格進行佈局或導航。這是沒有必要的。 UL通常是該任務的最佳選擇。 第二：讓你的元素塊級別和一些填充和風格，如你所願：http://kod.as/lab/nav/

請參閱http://css.maxdesign.com.au/listamatic/瞭解更多。