CSS選擇器

是CSS用來選擇HTML元素語法，告訴瀏覽器哪些元素會應用CSS樣式

• 通用選擇器(universal selector)

可以匹配 Html 所有元素

* {
    margin:  0;
    padding: 0;
}

• 元素選擇器(element selector)

可以匹配 Html 特定元素類型

h1 {
  font-size: 24px;
}

• ID選擇器(ID selector)

可以匹配具有特定 ID 元素

#my-header {
  background-color: red;
}

• 類別選擇器(class selector)

可以匹配具有特定類名元素

.red {
  background-color: red;
}

• 後代選擇器(descendant selector)

又稱包含選擇器，可以選擇為某元素後代元素

div p {
  font-size: 24px;
}

• 狀態選擇器(pseudo-class selector)

可以用來選擇元素特定狀態

.red a:hover {
  background-color: red;
}

• 組合選擇器(combinator)

可以用來組合不同選擇器，選擇更複雜元素

.red div p {
  background-color: red;
}

• 子元素選擇器(child selector)

可以選擇為某元素直接子元素的元素

div > p {
  font-size: 24px;
}

• 分組選擇器(grouping selector)

可以將不同選擇器組合在一起

h1, h2, h3 {
    font-size: 20px;
}

• 屬性選擇器(attribute selector)

可以用來選擇具有特定屬性元素

input[type="text"] {
   color: blue;
}

CSS偽元素

是附加至選擇器末關鍵字，對被選擇元素特定部分修改，不是一個實際存在元素，可以在CSS進行樣式

偽元素分兩類

• 偽類：元素狀態或行為應用樣式

  • :hover：被滑鼠懸停時
  • :focus：獲得焦點時
  • :active：被點擊或按下時

• 偽元素：元素特定位置插入內容

  • ::before：元素之前插入內容
  • ::after：元素之後插入內容

.button:hover {
  background-color: red;
  color: white;
}

.button::after {
  color: red;
  font-size: 20px;
}

::before ::after Content屬性用來指定插入內容，可以包含任何HTML元素或文字

.button::before {
  content: "\f002";
  font-family: FontAwesome;
  color: red;
}


.dropdown-menu::after {
  content: "\f0d7";
  font-family: FontAwesome;
  color: black;
}


.input-group::after {
  content: "";
  border-bottom: 1px solid black;
}

CSS 有許多其他偽元素

• ::first-line：選擇元素首行
• ::first-letter：選擇元素首字母
• ::selection：選擇元素被選中部分
• ::placeholder：選擇元素占位符文字
• ::before-after：選擇元素::before ::after 內容

甚至可以用來在網頁中添加各種效果，例如:添加圖標、下拉箭頭、邊框、動畫效果等等

/* 添加圖標 */
.button::before {
  content: "\f002";
  font-family: FontAwesome;
  color: red;
}

/* 下拉箭頭 */
.dropdown-menu::after {
  content: "\f0d7";
  font-family: FontAwesome;
  color: black;
}

/* 插入邊框 */
.input-group::after {
  content: "";
  border-bottom: 1px solid black;
}

/* 添加動畫 */
.button::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: red;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.button:hover::after {
  opacity: 1;
}