CSS從入門到精通——基礎選擇器(三)

id選擇器

id選擇器與我們上一關中學習的類選擇器類似,但在使用上有不同。

使用類選擇器時,指定一個元素屬於某類,使用的是關鍵字class,例如:

<body>
  <h1 class="important">溫馨提示</h1>
  <p>少一串腳印,多一份綠意。</p>
</body>

而在使用id選擇器時,使用的是關鍵字id。對於上面類選擇器的例子,用id選擇器書寫:

#important {
    color: red;
    font-weight: bold;
}

id選擇器語法

同理,我們可以看出,id選擇器的語法規則如下:

  1. 首先,將html中想要應用類樣式的元素,指定id名。

     <元素名 id="指定的類名"></元素名>
     <元素名 id="指定的類名">

    2.然後,書寫相應類的樣式。

    #指定的類名 {樣式聲明}

    類選擇器與id選擇器的區別

    類選擇器與id選擇器類似,那麼它們的區別是什麼呢?什麼情況下應該使用哪一種選擇器呢?

    它們最大的區別在於,在一個 HTML 文檔中,可以爲任意多個元素指定類,但id選擇器只能使用一次,一個id只能運用於一個元素。

    一般情況下,都推薦使用類選擇器。而在一些特定情況下,我們纔會建議使用id選擇器。例如,通過id選擇器在頁面中定義錨,在編寫 JavaScript 爲指定的頁面元素應用特殊行爲時。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章