什麼樣的CSS風格去當導航欄的樣式

Question

最近我的第一個網站的導航工作時，我一直很困惑哪些樣式去哪裏，當談到一個：link和：hover僞類。

這是我一個更好的解釋代碼：

#header_nav ul li { 
    font-family: "Futura Bk BT"; 
    font-size: 26px; 
    color: #FFF; 
    display: inline-block; 
    position: relative; 
    text-align: left; 
    text-decoration: none; 
    border-right: 1px solid #000; 
} 

#header_nav ul li a:link, #header_nav ul li a:visited { 
    list-style-type:none; 
    font-family: "Futura Bk BT"; 
    font-size: 26px; 
    color: #FFF; 
    text-align: left; 
    display: inline-block; 
    position: relative; 
    text-decoration: none; 
    padding: 9px 35px; 
} 

#header_nav ul li:hover a { 
    list-style-type:none; 
    font-family: "Futura Bk BT"; 
    font-size: 26px; 
    color: #B40000; 
    background-color: #FFF; 
    text-align: left; 
    display: inline-block; 
    position: relative; 
    text-decoration: none; 
    padding: 9px 35px; 
} 

正如你所看到的，除了一些補充和排除，爲的ID的所有3的代碼是一樣的。這是因爲我在試圖單獨設置樣式時看起來有隨機結果，所以我發現它更容易複製一切，一遍又一遍，這樣就不會丟失任何東西，然而，隨着我的StyleSheet擴展，此方法變得越來越混亂與新的頁面。

所以我向你們提出的問題是有經驗的開發人員：什麼樣的CSS樣式應該去哪裏定製鏈接？

感謝，

將

Answer 1

行爲更多的是取決於其它CSS規則，可能適用於您的鏈接。因此，如果您獲得「隨機結果」，請在您的網絡檢查員中查找其他規則，這可能會覆蓋您的規則集。

一些提示：

• list-style-type: none;不會使上<a>標籤的意義，它僅適用於<ul>或<ol>
• 這可能足以使text-decoration: none;只爲<a>標籤
• 如果您不想複製所有規則但需要子標籤中的規則，則可以使用inherit

如下我會寫你的代碼（未經測試）：

#header_nav ul li { 
    font-family: "Futura Bk BT"; 
    font-size: 26px; 
    color: #FFF; 
    display: inline-block; 
    position: relative; 
    text-align: left; 
    border-right: 1px solid #000; 
} 

#header_nav ul li a:link, 
#header_nav ul li a:visited { 
    font-family: inherit; 
    font-size: inherit; 
    color: inherit; 
    display: inline-block; 
    position: relative; 
    text-decoration: none; 
    padding: 9px 35px; 
} 

#header_nav ul li:hover a { 
    color: #B40000; 
    background-color: #FFF; 
} 

根據您的標記，你可以設置規則像font-family，font-size和color直接爲<a>標籤，如果沒有必要讓他們在<li>。