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: '✓'; }