破解「.」之間的區別CSS 樣式中的「#」和「#」
使用CSS 設計HTML 元素樣式時,了解類別選擇器( “.”)和ID 選擇器(“#”)之間的差異非常重要。
Class選擇器(“.”)
類別選擇器是基於共享類別屬性來定位多個元素。它們用於應用於一組元素的樣式,例如:
- .error { color: red; }: 選擇類別為「error」的所有元素並套用樣式。
- .nav-item { background-color: White; }:選擇具有「nav-item」類別的所有元素,並設定其背景樣式。
ID 選擇器(“#”)
ID 選擇器根據其目標特定的、唯一的元素身份屬性。它們用於對頁面上僅出現一次的元素進行樣式化,例如:
- #sidebar { width: 200px; }: 選擇 ID 為「sidebar」的單一元素並設定其寬度。
- #header { font-size: 2em; }:選擇 ID 為「header」的唯一元素並增加其字體大小。
特異性
ID 選擇器比類選擇器具有更高的特異性。這意味著,如果 ID 選擇器和類別選擇器套用於相同元素且樣式衝突,則會套用 ID 選擇器的樣式。
使用建議
-
類別選擇器適合多次出現的樣式元素,其中每個實例應共用相同的樣式。
-
ID 選擇器 非常適合設計在頁面上僅出現一次的獨特元素。
其他資源
- [選編:CSS 綜合指南選擇器](https://web.archive.org/web/20160707052959/http://www. selectutorial.com/css/selector-tutorial.html)
以上是CSS 選擇器中的「.」和「#」有什麼不同?的詳細內容。更多資訊請關注PHP中文網其他相關文章!