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

1.常见CSS选择器类型：

• 通配选择器 (*)：选择所有元素

• 元素选择器 (div, p, h1等)：选择特定类型的HTML元素

• ID选择器 (#id)：选择具有特定id属性的元素

• 类选择器 (.class)：选择具有特定class属性的元素

• 后代选择器 (div p)：选择某个元素内部的所有指定后代元素

• 子选择器 (div > p)：选择某个元素的直接子元素

• 属性选择器 ([attr], [attr="value"])：基于属性选择元素

• 伪类选择器 (:hover, :first-child等)：选择元素的特定状态

• 伪元素选择器 (::before, ::after等)：选择元素的特定部分

2.伪类选择器分类：

• 动态伪类：如 :hover, :active, :focus

• 目标伪类：如 :target

• 语言伪类：如 :lang(en)

• 元素状态伪类：如 :checked, :disabled

• 结构伪类：如 :first-child, :nth-child()

• 否定伪类：如 :not(.class)

3.链接伪类选择器的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: """;
}

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

参考文章：原文链接