[Week6] CSS 選取器:全域選擇器、:nth-child()


Posted by Mily on 2020-09-12

全域選擇器

全域選擇器以星號 * 代表,適用於所有元素

如果要讓整個網頁都是相同字型,建議下在 body 還是 * 好呢?

建議將 font-family 寫在 <body> 裡,而 css reset 的東西則寫在全域選擇器 *
因為 <body> 是 tag 選取器,而 tag 選取器的層級高於 * 選取器。

:nth-child()

一、使用:nth-child(n):先看「順序」,再看「標籤」

<div class="wrap">
  <span>第一行</span>
  <div>第二行</div>
  <div>第三行</div>
</div>

當我們想選擇內容是 第二行<div> 標籤時,可能會這樣寫:

.wrap .box div:nth-child(1){
  color: red;
}

但這樣寫是無效的,:nth-child 選擇器的特性,會先在 .wrap 中先找到順序 1 的標籤,再去看標籤是否符合是 <div> 標籤。

所以正確寫法應改為:

.wrap .box div:nth-child(2){
  color: red;
}

二、選取 class 時,接續的 class 也必須相同

<div class="wrap">
  <div class="item1">第一行</div>
  <div class="item1">第二行</div>
  <div class="item2">第三行</div>
  <div class="item1">第四行</div>
  <div class="item2">第五行</div>
</div>

當我們想選擇第二個 item2 的 class 時,可能會這樣寫:

.wrap .item2:nth-child(2){
  color: red;
}

同理剛剛提到的 「先看順序」,所以這樣寫也是無效的!


參考:


#html #css







Related Posts

MTR04_1124

MTR04_1124

AWS Lambda + GitHub API + Google Sheet = 自動化簽到系統

AWS Lambda + GitHub API + Google Sheet = 自動化簽到系統

ecto 簡介 (1) – cell 與 plasm

ecto 簡介 (1) – cell 與 plasm


Comments