E＃myid與#myid CSS選擇器

Question

我很好奇B/W有什麼區別E＃myid與#myid（E是任何元素）假設在頁面上只能有一個帶有#myid的元素？

Answer 1

#myid對input元素沒有任何影響，這一定是您的錯誤/錯誤。這對我來說可以。

---

當你改變了你的問題：你有兩個使用相同的樣式表的兩個不同的文件

圖像。在一個文檔中，DIV元素具有ID「foo」，在另一個文檔中，SPAN元素具有相同的ID。然後，您可以使用下面的樣式表的樣式不同的兩個元素：然後

#foo { 
    color: #FFF; 
} 
div#foo { 
    background-color: #F00; 
} 
span#foo { 
    background-color: #0F0; 
} 

兩個元件將具有相同的字體顏色，但不同的背景顏色。

Answer 2

區別在於，在不同的頁面中，您可以使用該ID具有不同的元素。爲什麼你會這樣做，超出我的範圍，但可能需要（只是一個例子），某些頁面上的div與其他頁面上的span相同。

不同的瀏覽器會在非指定的角落情況下給你不同的和奇怪的結果。一些瀏覽器允許多個元素共享相同的ID，而其他瀏覽器則不然。它甚至會隨同一瀏覽器的不同版本而改變。在不知道你使用的瀏覽器的情況下，很難複製這個bug，但我建議你在幾個瀏覽器上測試你的css。

Answer 3

它們具有不同的特異性。

http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 4

隨着大約ID不被necesarily頁面上獨特的其他人點...

，能夠具有施加到無論N個不同的元件（例如< UL標識一個ID = MyList>或< OL Id = MyList>）。然後，您可以使用不同的JavaScript位來處理各種元素（即處理UL的一些代碼，處理OL的不同位代碼）。

不是說這是否是一個好設計......只是說這是可能的。

編輯：我的意思是，服務器端可以與要麼生成頁面的< OL>或> UL> ...不能同時在同一時間。認爲動態網頁。再說一遍......如果這是一個很好的設計，我不會說這種或那種方式......只是這是可能的。

Answer 5

這兩個選擇器有不同的特異性。在一個更具體的選擇器中給出的規則將覆蓋在一個不太具體的規則中給出的規則

特異性規則非常簡單。每當發生衝突（兩個或更多規則在同一元素上設置不同的值）時，將按照以下規則的順序詢問：：

1）規則所在的「空間」是什麼？在更高的「空間」中的規則自動贏得較低空間中的規則： a）用用戶的樣式表設置，使用！重要 b）由作者的樣式表設置，用！重要 c）通過瀏覽器的樣式表設置，具有！重要 d）設置在style =「」規則 e）由用戶樣式表設置，不含！重要 f ）由作者的樣式表設置，無！重要 g）通過瀏覽器的樣式表設置，無！重要

2）選擇器中有多少個#ids？擁有更多#ids的選擇器會自動與較少的選擇器競爭（假設它們與規則＃1並列）。

3）選擇器中有多少.classes或：僞類？具有更多.class的選擇器會自動對較少的選擇器（假設它們與之前的規則相關聯）獲勝。

4）選擇器中有多少個普通元素？再一次，越多越好。

5）最後，文檔中有多少是規則？如果以前的規則與以前的所有類別綁定，則以後的規則會覆蓋較早的規則這適用於文檔（位於CSS文件底部，位於頂部）和文檔之間（第二個<鏈接> ed css文件中的任何規則比第一個<鏈接> ed css文件中的規則晚） 。

理解特異性可以幫助您編寫更簡單的CSS。我幾乎總是以最接近的#id開始我的選擇器，因爲它同時限制了選擇器到我想要的元素的擴散，和自動覆蓋了我可能在文檔中設置的任何「全局」css規則。