CSS选择器测试

通配選擇器，匹配頁面中的所有元素。

* { margin: 0; }

ID 選擇器，匹配指定 id 的唯一元素。

#header { color: #111; }

類選擇器，匹配包含指定 class 的元素。

.btn { border-radius: 8px; }

後代選擇器，匹配 A 內部任意層級的 B。

nav a { text-decoration: none; }

子代選擇器，僅匹配 A 的直接子元素 B。

ul > li { list-style: none; }

相鄰兄弟選擇器，匹配緊跟在 A 後面的第一個 B。

h2 + p { margin-top: 0; }

通用兄弟選擇器，匹配 A 後面所有同級 B。

h2 ~ p { color: #666; }

屬性存在選擇器，匹配包含指定屬性的元素。

input[required] { border-color: red; }

屬性值選擇器，匹配屬性值等於指定內容的元素。

a[target='_blank'] { color: #2563eb; }

滑鼠懸停偽類，匹配懸停狀態元素。

button:hover { opacity: .9; }

焦點偽類，匹配當前獲得焦點的元素。

input:focus { outline: 2px solid #3b82f6; }

結構偽類，按子元素序號匹配元素。

li:nth-child(2n) { background: #f8fafc; }

偽元素，在元素內容前插入可樣式化內容。

.tag::before { content: '#'; }

偽元素，在元素內容後插入可樣式化內容。

.tag::after { content: '✓'; }