CSS ID與類

CSS ID與CSS Class的基本區別是什麼？CSS ID與類

有人告訴我，ID只能在頁面中使用一次。但我發現它可以多次使用。

像

body 
{ 
     background-color: #3399FF; 
} 

div#menuPane{ 
    position: absolute; 
    left: 25px; 
    top: 25px; 
    width: 25%; 
} 

div.menu { 
    display: block; 
    font-size: 14px; 
    margin: 0; 
    padding: 0; 
    border: 2px solid #7FC07F; 
} 

div.menu a { 
    display: block; 
    font-weight: bold; 
    text-decoration: none; 
    text-align: right; 
    letter-spacing: 1px; 
    margin: 0px; 
    color: black; 
    border-top: 1px solid #487048; 
} 

div.menu a:link{ 
    background: #33CCFF; 
} 

div.menu a:visited{ 
    background: #33CCFF; 
} 
div.menu a:hover{ 
    background: #3FC73F; 
    letter-spacing: 2px; 
} 

div.menu h4{ 
    padding: 2px; 
    margin: 0px; 
} 

div#content{ 
    position: absolute; 
    left: 30%; 
    top: 25px; 
    width: auto; 
    border: 2px double #7FC07F; 
    background-color: #33CCFF; 
    padding: 2px; 
    margin-right: 5px; 
} 

div#content h3{ 
    background-color: #A3F4A3; 
    text-align: right; 
    letter-spacing: -1px; 
    color: #386938; 

    border-bottom: 1px solid black; 
} 

div#content a:link, a:visited{ 
    background:#0099FF; 
    color: #A3F4A3; 
    letter-spacing: 1px; 
} 

div#content a:hover{ 
    background: #FF0000; 
    color: #A3F4A3; 
    letter-spacing: 1px; 
}

來源

2009-06-09 anonymous

可能的複製，http://stackoverflow.com/q/544010/425313 – 2013-05-02 03:24:07

它只能被分配到一個頁面元素，但它可以在多個CSS規則中使用。類名可以分配給頁面中的多個元素。

來源

2009-06-09 15:20:57 Tadmas

請參閱this answer瞭解差異的說明。

一般來說，您使用的ID爲你知道只要出現一次，例如，之類的高層次佈局的div 這樣的側邊欄，橫幅區等

類是造型的東西在重複樣式爲的情況下使用，例如說你的頭一個特殊形式的錯誤消息標題的，你可以創建一個樣式h1.error {}這將只適用於

來源

2009-06-09 15:22:11

認爲像你的學生證編號的。你的學校裏只有一個 - 你的。想像一羣孩子一樣上課......他們都屬於同一個班級：「生物學」。如果你想解決一個特定的學生問題，你可以通過確認他/她的身份證明來這麼做 - 因爲那樣不會解決超過一個學生的問題。如果你想對一羣學生說話，你可以通過承認他們的班級來做到這一點 - 「今天的生物課堂將享受比薩餅」，而「喬納森桑普森今天將享受比薩餅」。

<students> 
    <student id="jonathan-sampson" class="biology" /> 
    <student id="lizza-matthews" class="earth-science" /> 
    <student id="michelle-andrews" class="biology" /> 
</students>

外賣：