#navlist li #current和#navlist li之間的區別當前

我想了解CSS機制，但教程迄今還沒有很好的來源。他們只是刮傷表面。#navlist li #current和#navlist li之間的區別當前

我需要了解使用#navlist li #current和#navlist li .current之間的基本區別。

爲了成爲一個非常實用的例子，名稱不是通用的。

我想什麼不同是：

#navlist li #current

如果施加到li元件的父元素#navlist內將繞過任何繼承格式顯示#navlist li #current格式。

在另一方面：

#navlist li .current

將應用它的格式也從其他格式繼承。

在這個例子中：

#navlist li a:hover 
 
{ 
 
    color: #FFFFFF; 
 
    background: #3364BB; 
 
    border-color: #0F3974; 
 
} 
 

 
#navlist li .current 
 
{ 
 
    color: #000; 
 
    background: #FFFFFF; 
 
    border-bottom: 1px solid #FFFFFF; 
 
}

<ul id="navlist"> 
 
    <li><a href="#" class="current">Home</a></li> 
 
    <li><a href="#">Profile</a></li> 
 
    <li><a href="#">Destinations</a></li> 
 
    <li><a href="#">Discuss</a></li> 
 
</ul>

該標籤將是白色與黑色字體，但懸停將被應用。

有了這個其他的例子：

#navlist li a:hover 
 
{ 
 
    color: #FFFFFF; 
 
    background: #3364BB; 
 
    border-color: #0F3974; 
 
} 
 

 
#navlist li #current 
 
{ 
 
    color: #000; 
 
    background: #FFFFFF; 
 
    border-bottom: 1px solid #FFFFFF; 
 
}

<ul id="navlist"> 
 
     <li><a href="#" id="current">Home</a></li> 
 
     <li><a href="#">Profile</a></li> 
 
     <li><a href="#">Destinations</a></li> 
 
     <li><a href="#">Discuss</a></li> 
 
</ul>

#current應用，沒有別的，剩下的標籤白色即使鼠標懸停在它。

是嗎？

來源

2011-02-22 Nicolas de Fontenay

是嗎？

是。這是因爲a:hover比.current更具體，但小於#current。所以你的懸停風格將覆蓋你的類風格，但你的ID風格是不變的。

a:hover比.current更具體，因爲它結合了一個類型選擇器和一個僞類選擇器。由於a，這擊敗了類選擇器（儘管:hover和.current同樣具體）。

#current比a:hover更具體，因爲ID始終是最具體的，即使您在懸停樣式規則的選擇器中組合了大量非ID。

來源

2011-02-22 17:16:24 BoltClock

非常感謝。非常短，清晰！ –

@ndefontenay：我做了一點時間:) – BoltClock

歡呼！ –

是的。（似乎特異性的原因是因爲BoltClock說）

本頁面會告訴你的瀏覽器如何讀取你的CSS選擇器：http://www.css-101.org/descendant-selector/go_fetch_yourself.php

記住：ID是唯一的，可用於只有1元;但類可以用於超過1個元素和標籤

注意：實際上這兩個規則選擇相同的元素並應用。如果您在#navlist li a：hover中編寫更多內容，當鼠標移至#current（因此稱爲「級聯」）時，這些非重疊的繁榮將會出現。

更多：您需要了解的一些關鍵字/概念：inheritance/cascading， css選擇器，css特異性，僞類

ps嘗試jsbin/jsfiddle/cssdesk爲您的css測試 - 從實踐中學習：D

來源

2011-02-22 17:30:50 vincicat

感謝您瞭解有關CSS的更多信息和資源。 –

歡迎您:) – vincicat

我認爲你的問題有一些語法錯誤。這種風格：

#navlist li .current

將針對您的LI的子元素，像這樣：

<ul id="navlist"> 
    <li> 
      <a href="#" class="current">Foo</a> 
    </li> 
</ul>

我假設你打算把的「當前」類或ID的LI本身。如果是這樣，您的規則應該是這個樣子：

#navlist li.current //在「禮」和「.current」

還記得ID是‘加權’比CSS類的詳細之間沒有空格。所以，如果你有兩個同樣結構化的規則，但是一個使用ID和另一個使用類，那麼ID規則將勝過類規則。它們都將適用，但ID規則將適用最後。如果您正在進行字體大小調整等工作，請注意這一點，規則是累積的，而不是僅僅覆蓋對方。

來源

2011-02-22 17:33:57 Graham

#navlist li #current和#navlist li之間的區別當前

回答

相關問題