基本選擇器

• Class selectors 類別選擇器

  開頭為「.」，後面加上類別名稱。

  舉例：
  HTML

  <div class="text">
      睡覺是重要的。
  </div>
  

  CSS

  .text {
      color: blueviolet;
  }
  

  顯示：
  

• ID selectors ID選擇器

  開頭為「#」，後面加上id名稱。

  舉例：
  HTML

  <div class="title" id="sleep">
      睡覺是重要的。
  </div>
  

  CSS

  #sleep {
      background-color: rgb(234, 134, 97);
  }
  

  顯示：
  

• Type selectors 型態選擇器

  設定在HTML的標籤上，在HTML中相同的標籤均會套用。

  舉例：
  HTML

  <div class="title" id="sleep">
      睡覺是重要的!
  </div>
  <div class="title" id="eat">
      吃也是重要的!
  </div>
  

  CSS

  div {
      font-weight: bold;
  }
  

  顯示：
  

• Universal selector 通用選擇器

  使用字元「*」，整個網頁內容均會套用設定。

  舉例：
  HTML

  <h3 class="title" id="sleep">
      睡覺是重要的!
  </h3>
  <h4 class="title" id="eat">
      吃也是重要的!
  </h4>
  

  CSS

  * {
      font-family: 'Arial Narrow', Arial, sans-serif;
      background-color: bisque;
  }
  

  顯示：
  

• Attribute selectors 屬性選擇器

  根據HTML內容中標籤的特定屬性來做設定。

  舉例：
  HTML

  <h4 id="sleep">
      睡覺是重要的!
  </h4>
  <h4 id="eat">
      吃也是重要的!
  </h4>
  

  CSS

  h4[id="sleep"] {
      background-color: rgb(190, 151, 227);
  }
  

  顯示：
  

參考資料：https://developer.mozilla.org/zh-TW/docs/Glossary/CSS_Selector
https://injerry.pixnet.net/blog/post/38847966
https://injerry.pixnet.net/blog/post/38847966