選擇器進階

---

子串選擇器

/* 匹配 href 以 "https" 開頭的鏈接 */
a[href^="https"] {color: green;
}/* 匹配 href 包含 "example" 的鏈接 */
a[href*="example"] {text-decoration: underline;
}/* 匹配 href 以 ".pdf" 結尾的鏈接 */
a[href$=".pdf"]::after {content: "📄";
}

偽類

1. 狀態偽類

/* 未訪問鏈接 */
a:link { color: blue; }/* 已訪問鏈接 */
a:visited { color: purple; }/* 鼠標懸停 */
button:hover { background: #eee; }/* 輸入框獲取焦點時 */
input:focus { outline: 2px solid orange; }

2. 結構偽類

/* 第一個子元素 */
ul li:first-child { font-weight: bold; }/* 最后一個子元素 */
ul li:last-child { border-bottom: none; }/* 第3個元素 */
ul li:nth-child(3) { color: red; }/* 奇數行 */
tr:nth-child(odd) { background: #f5f5f5; }

偽元素

1. ::before / ::after

/* 在元素前插入內容 */
h1::before {content: "🌟";margin-right: 10px;
}/* 在元素后插入內容 */
.price::after {content: "元";color: #999;
}

2. ::selection

/* 文本選中樣式 */
::selection {background: yellow;color: black;
}

其他選擇器

1. 群組選擇器

/* 同時選擇 h1-h3 */
h1, h2, h3 {font-family: Arial;
}

1. 否定偽類

/* 排除 .disabled 的按鈕 */
button:not(.disabled) {cursor: pointer;
}