Re: [問題] <id>的使用時機?
※ 引述《ljm71 (ljm71)》之銘言：
: 我被<class> 和 <id> 的使用時機弄混了
: 我查資料得知
: <class>可以用於多個元素 而<id>則是只針對特定單一個樣式
: <class>部分比較容易理解
: 如果我想讓<h1> <h2> <p>..等元素的顏色相同
: 我可以在css中設定一個顏色樣式叫color
: 然後在<h1> <h2> <p>...取相同的<class=color>名稱
: 但<id>的使用時機就不太了解了 請問什麼情況下才使用<id>呢?
: 如果是針對單一個的樣式 那我在css中設定專門的樣式叫only
: 用<class>只套用在單一個元素上會有問題嗎?
: 懇請為我解惑 謝謝~
id 很適合拿來當 anchor 用。
假設你替自己做了一個履歷的網頁，
履歷:
通訊:
- 姓名
- 地址
- 電話:
- 0987-654-321
- 0999-999-999
經歷:
- 現在: example.edu 站長
- 2011: example.org 站長
- 2010: example.com 站長
技能:
- css 3
- html 5
- ecmascript 5
- php 5
這時候就很適合在通訊、經歷、技能這三個區塊加上 id，
這樣你可以很輕易把三個區塊的風格分出來。
例如:
#contact p { color: red }
#history p { color: green }
#skills p { color: blue }
那你當然也可以用 class 不要用 id，變成寫
.contact p { color: red }
.history p { color: green }
.skills p { color: blue }
也是可以，這是設計問題，沒有什麼對錯之分，不過就語義上來說，用 id 比較貼切。
> -------------------------------------------------------------------------- <
那 id 跟 class 在寫 css selector 的時候有權重（specificity）差別。
# 的權重比較重，class 比較輕。舉例來說。
<p id="contact" class="contact" /></p>
無論你寫
#contact { color: purple }
.contact { color: yellow }
或
.contact { color: yellow }
#contact { color: purple }
結果都是紫色，這是 id 跟 class 對 css 的影響。
> -------------------------------------------------------------------------- <
id 的話，ms 跟 w3c 的 document 都有 getElementById 這個 method，可以選 node。
class 的話，ms 的 document 沒有 getElementsByClassName，有些跨平台的問題。
當然這小問題很多 js library 有解決，原生的 getElementsByClassName 跟
自己加的 getElementsByClassName 當然效能有差。這是 js。
> -------------------------------------------------------------------------- <
瀏覽器的話，因為 id 具有獨特性，所以有時候，
一個網頁裡面有多個 elements 具備相同的 id 時，
會出現意外的情況，這很麻煩……
全部都用 class 的話可以避免這個問題。
--
Oni devas ami animalojn. Ili estas tiel bongustaj.
One should love animals. They are so tasty.
每個人都應該愛動物，他們是如此美味。
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 175.180.52.190
→
01/10 22:09, , 1F
01/10 22:09, 1F
推
01/11 01:47, , 2F
01/11 01:47, 2F
推
01/11 20:11, , 3F
01/11 20:11, 3F
→
01/11 20:14, , 4F
01/11 20:14, 4F
→
01/11 20:14, , 5F
01/11 20:14, 5F
討論串 (同標題文章)