1. 屬性選擇器

根據元素的屬性進行選擇

示例

/* 1.選擇所有帶有 day 屬性的元素 */
[day] {
  width: 200px;
  height: 200px;
  background-color: pink;
}

2. 結構偽類選擇器

當子元素標籤一致時, 用哪個都一樣 但是如果子元素不一致, 注意前三個和後三個的區別

示例

ul li:first-child              // ul 下面的第一個 li
ul li:last-child              // ul 下面的最後一個 li

nth-child(n) : n可以是數字、關鍵字、公式

注: 第一個子元素就是1, 0 或者 越界的會被忽略

• n 是數字時, 表示第幾個
• 關鍵字: even 偶數, odd 奇數
• 公式: 當n是公式時, n從0開始計算

示例

ul li:nth-child(2n)      // 選擇偶數的子元素
ul li:nth-child(2n+1)      // 選擇奇數的子元素
ul li:nth-child(3n)      // 選擇3的倍數的子元素
ul li:nth-child(-n+5)      // 選擇前五個子元素

3. 偽元素選擇器

@ 注意:

• before 和 after 必須有 content 屬性
• before 和 after 建立一個元素, 該元素屬於行內元素