Lala Code

Lala 的前端大補帖,歡迎一起鑽研前端技術😊

0%

Day3-元素選擇器-誰說標籤只是標籤

Type Selectors

元素選擇器(Type Selectors)也可以稱作「標籤選擇器」。我們可以在 HTML 文件中,選擇任何的 HTML 元素,並對選中的標籤元素來處理樣式。不過,由於 <head> 部分的標籤(如 <meta>, <title> 等)不會顯示在網頁的可見區域,因此對這些標籤的樣式設置不會產生效果。



💠 元素選擇器-基本用法

1
2
3
<h1>我是 H1 標籤</h1>
<p>我是 P 標籤</p>
<p>我也是 P 標籤</p>
1
2
3
4
5
6
7
8
h1 {
color: royalblue
}

p {
background-color: lightblue;
padding: 10px;
}
  • 直接利用 HTML 標籤設置樣式

Type Selectors

不過要注意的是,元素選擇器有一個局限性:它無法對相同類型的元素應用不同的樣式

在上述範例中,如果你想為第二段的 <p> 元素設置不同的背景顏色,僅使用元素選擇器是不夠的。這種情況下,你需要使用其他類型的選擇器來達成目標。

因此,儘管元素選擇器很方便,但在處理需要不同樣式的情況時,還需要額外的選擇器,比方說下一篇會講到的類選擇器。


💠 總結

  • 元素選擇器簡單易用,非常適合快速為頁面中所有相同類型的元素設置統一樣式。
  • 由於元素選擇器只能設置統一的樣式,如果需要為特定元素應用不同的樣式,則應考慮使用類選擇器來實現更精細的控制。


🚀線上課程分享

線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程
想學習更多關於前後端的線上課程,可以參考看看。

Hahow

Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住



六角學院

如果你是初學者,非常推薦六角學院哦!
剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!


Udemy

Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!
也是很多工程師推薦的線上課程網站。
❤️