CSS 常见选择器

原创已于 2025-08-27 00:04:46 修改 · 287 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2025-08-27 00:03:16 首次发布

CSS 专栏收录该内容

27 篇文章

订阅专栏

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: """;
}

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