1. 元素选择器
p {
/* 选择所有 <p> 元素 */
}
2. 类选择器
.button {
/* 选择所有类为 "button" 的元素 */
}
3. ID 选择器
#header {
/* 选择具有 "header" ID 的元素 */
}
4. 后代选择器
nav ul {
/* 选择 <nav> 下的所有 <ul> 元素 */
}
5. 子元素选择器
nav > ul {
/* 选择 <nav> 下的直接子元素为 <ul> 的元素 */
}
6. 通配符选择器
* {
/* 选择文档中的所有元素 */
}
7. 属性选择器
input[type="text"] {
/* 选择所有 type 属性为 "text" 的 <input> 元素 */
}
8. 伪类选择器
a:hover {
/* 鼠标悬停时选择所有 <a> 元素 */
}
li:nth-child(even) {
/* 选择偶数位置的 <li> 元素 */
}
9. 伪元素选择器
p::first-line {
/* 选择每个 <p> 元素的第一行 */
}
p::before {
/* 在每个 <p> 元素前插入内容 */
}
10. 组合选择器
h1, h2, h3 {
/* 选择所有 <h1>、<h2> 和 <h3> 元素 */
}
这只是 CSS 选择器的一小部分,它们可以按需组合使用,以实现更精确的元素选择。深入了解 CSS 选择器的使用可以帮助你更灵活地控制页面样式。
转载请注明出处:http://www.pingtaimeng.com/article/detail/12584/CSS