1. 基础选择器
- 元素选择器
选择所有指定类型的 HTML 元素。
p {color: blue;
}
选择所有 p 标签，并将文字颜色设为蓝色。
- 类选择器
选择带有特定类名的元素，类名前加 .。
.container {margin: 20px;
}
选择类名为 container 的所有元素。
- ID 选择器
选择带有特定 ID 的元素，ID 前加 #。
#header {background-color: gray;
}
选择 ID 为 header 的元素。
2. 组合选择器
- 后代选择器
选择某个元素内的所有指定后代元素。
div p {font-size: 16px;
}
选择所有位于 div 内的 p 标签。
- 子选择器
选择某个元素的直接子元素。
div > p {color: green;
}
选择 div 的直接子元素 p。
- 相邻兄弟选择器
选择紧跟在某个元素之后的相邻兄弟元素。
h1 + p {margin-top: 10px;
}
选择紧跟在 h1 后面的第一个 p 元素。
- 一般兄弟选择器
选择某元素后所有兄弟元素。
h1 ~ p {color: red;
}
选择 h1 后的所有兄弟 p 元素。
3. 属性选择器
- 存在属性选择器
选择带有特定属性的元素。
input[type] {border: 1px solid #000;
}
选择带有 type 属性的所有 标签。
- 属性值选择器
选择特定属性值的元素。
input[type="text"] {background-color: yellow;
}
选择 type 属性值为 text 的 标签。
4. 伪类选择器
- :hover
当用户悬停在元素上时触发。
a:hover {color: orange;
}
当用户悬停在 a 标签上时，文字变为橙色。
- :nth-child()
选择第几个子元素。
li:nth-child(2) {background-color: lightgray;
}
选择第 2 个 li 元素。
5. 伪元素选择器
- ::before
在元素内容前插入内容。
p::before {content: "Note: ";color: red;
}
在每个 p 标签内容前加上 "Note: "。
- ::after
在元素内容后插入内容。
p::after {content: "!";
}
在每个 p 标签内容后加上 “!”。
