学习如何精确选择和定位 HTML 元素
输入选择器，实时查看匹配的元素：
输入选择器后自动匹配...
点击不同类型的选择器，查看其特点和用法：
选择器用于选择要应用样式的 HTML 元素。掌握选择器是使用 CSS 的基础。
选择所有指定类型的元素。
p {
color: blue;
}
h1 {
font-size: 32px;
}🎯 点击下方元素查看选择器效果：
这是一个段落
这是另一个段落
选择具有指定 class 属性的元素，以 . 开头。
.highlight {
background-color: yellow;
}
.text-large {
font-size: 20px;
}🎨 输入类名，查看匹配效果：
选择具有指定 id 属性的元素，以 # 开头。每个 ID 在页面中应该是唯一的。
#header {
background-color: navy;
}
#main-content {
width: 80%;
}选择页面中的所有元素。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}元素选择器：所有 p 标签都是蓝色
类选择器：这段文字有黄色背景
ID 选择器：这段文字是红色加粗
同时选择多个元素，用逗号分隔。
h1, h2, h3 {
color: navy;
font-family: Arial;
}选择某元素内部的所有指定元素（用空格分隔）。
div p {
color: green;
}
.container .text {
font-size: 16px;
}🌳 后代选择器 vs 子选择器 可视化：
✓ p (直接子元素)
span✓ p (后代元素)
✓ p (直接子元素)
span✗ p (不是直接子元素)
只选择直接子元素（用 > 分隔）。
div > p {
color: red;
}
ul > li {
list-style: none;
}选择紧接在另一元素后的元素（用 + 分隔）。
h2 + p {
font-weight: bold;
}选择某元素后面的所有兄弟元素（用 ~ 分隔）。
h2 ~ p {
color: gray;
}后代选择器：container 内的 p 是绿色
嵌套更深的 p 也是绿色
根据元素的属性和属性值选择元素。
| 选择器 | 说明 | 示例 |
|---|---|---|
| [attr] | 有该属性的元素 | [title] { color: blue; } |
| [attr=value] | 属性值等于 value | [type="text"] { border: 1px solid; } |
| [attr^=value] | 属性值以 value 开头 | [href^="https"] { color: green; } |
| [attr$=value] | 属性值以 value 结尾 | [src$=".jpg"] { border: 2px solid; } |
| [attr*=value] | 属性值包含 value | [class*="btn"] { padding: 10px; } |
/* 选择所有有 title 属性的元素 */
[title] {
cursor: help;
}
/* 选择 type="text" 的 input */
input[type="text"] {
border: 1px solid #ccc;
}
/* 选择 href 以 https 开头的链接 */
a[href^="https"] {
color: green;
}伪类用于定义元素的特殊状态。
| 伪类 | 说明 |
|---|---|
| :hover | 鼠标悬停时 |
| :active | 元素被激活时（点击时） |
| :focus | 元素获得焦点时 |
| :first-child | 第一个子元素 |
| :last-child | 最后一个子元素 |
| :nth-child(n) | 第 n 个子元素 |
| :not(selector) | 不匹配选择器的元素 |
/* 鼠标悬停效果 */
a:hover {
color: red;
text-decoration: underline;
}
/* 输入框获得焦点时 */
input:focus {
border-color: blue;
outline: none;
}
/* 第一个子元素 */
li:first-child {
font-weight: bold;
}
/* 偶数行 */
tr:nth-child(even) {
background-color: #f0f0f0;
}选择不同的选择器类型，查看效果：
这是第一个段落
这是第二个段落（有类）
这是第三个段落（有ID）
这是容器内的段落