CSS 常见选择器

目录

常见CSS选择器类型

伪类选择器分类

链接伪类选择器的LVHA顺序

选择器优先级

实际应用示例

---

CSS选择器是CSS中用于选择HTML元素并应用样式的关键工具。以下是各种选择器的详细介绍：

常见CSS选择器类型

1. 通配选择器 (*)：选择所有元素
2. 元素选择器 (div, p, h1等)：选择特定类型的HTML元素
3. ID选择器 (#id)：选择具有特定id属性的元素
4. 类选择器 (.class)：选择具有特定class属性的元素
5. 后代选择器 (div p)：选择某个元素内部的所有指定后代元素
6. 子选择器 (div > p)：选择某个元素的直接子元素
7. 属性选择器 ([attr], [attr="value"])：基于属性选择元素
8. 伪类选择器 (:hover, :first-child等)：选择元素的特定状态
9. 伪元素选择器 (::before, ::after等)：选择元素的特定部分

伪类选择器分类

• 动态伪类：如 :hover, :active, :focus
• 目标伪类：如 :target
• 语言伪类：如 :lang(en)
• 元素状态伪类：如 :checked, :disabled
• 结构伪类：如 :first-child, :nth-child()
• 否定伪类：如 :not(.class)

链接伪类选择器的LVHA顺序

对于<a>标签，有四个重要的伪类选择器，建议按照LVHA顺序书写：

1. :link - 未访问的链接
2. :visited - 已访问的链接
3. :hover - 鼠标悬停时的链接
4. :active - 鼠标点击激活时的链接

a:link {color: blue;
}a:visited {color: purple;
}a:hover {color: red;
}a:active {color: orange;
}

选择器优先级

CSS选择器的优先级从高到低为：

1. 内联样式 (1000)
2. ID选择器 (100)
3. 类选择器、属性选择器、伪类 (10)
4. 元素选择器、伪元素 (1)

实际应用示例

/* 通配选择器 */
* {margin: 0;padding: 0;
}/* 元素选择器 */
h1 {font-size: 2em;
}/* 类选择器 */
.highlight {background-color: yellow;
}/* ID选择器 */
#main-header {color: blue;
}/* 后代选择器 */
.nav ul li {display: inline-block;
}/* 子选择器 */
.container > p {margin-bottom: 1em;
}/* 属性选择器 */
input[type="text"] {border: 1px solid #ccc;
}/* 伪类选择器 */
tr:nth-child(odd) {background-color: #f2f2f2;
}/* 伪元素选择器 */
.quote::before {content: """;
}

掌握这些选择器的使用方法和优先级规则，能够帮助您更精确地控制网页元素的样式。