目录
CSS选择器是CSS中用于选择HTML元素并应用样式的关键工具。以下是各种选择器的详细介绍:
常见CSS选择器类型
- 通配选择器 (
*
):选择所有元素 - 元素选择器 (
div
,p
,h1
等):选择特定类型的HTML元素 - ID选择器 (
#id
):选择具有特定id属性的元素 - 类选择器 (
.class
):选择具有特定class属性的元素 - 后代选择器 (
div p
):选择某个元素内部的所有指定后代元素 - 子选择器 (
div > p
):选择某个元素的直接子元素 - 属性选择器 (
[attr]
,[attr="value"]
):基于属性选择元素 - 伪类选择器 (
:hover
,:first-child
等):选择元素的特定状态 - 伪元素选择器 (
::before
,::after
等):选择元素的特定部分
伪类选择器分类
- 动态伪类 :如
:hover
,:active
,:focus
- 目标伪类 :如
:target
- 语言伪类 :如
:lang(en)
- 元素状态伪类 :如
:checked
,:disabled
- 结构伪类 :如
:first-child
,:nth-child()
- 否定伪类 :如
:not(.class)
链接伪类选择器的LVHA顺序
对于<a>
标签,有四个重要的伪类选择器,建议按照LVHA顺序书写:
-
:link
- 未访问的链接 -
:visited
- 已访问的链接 -
:hover
- 鼠标悬停时的链接 -
:active
- 鼠标点击激活时的链接a:link {
color: blue;
}a:visited {
color: purple;
}a:hover {
color: red;
}a:active {
color: orange;
}
选择器优先级
CSS选择器的优先级从高到低为:
- 内联样式 (1000)
- ID选择器 (100)
- 类选择器、属性选择器、伪类 (10)
- 元素选择器、伪元素 (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: """;
}
掌握这些选择器的使用方法和优先级规则,能够帮助您更精确地控制网页元素的样式。