CSS选择器的基本分类

CSS选择器是样式表语言中的核心组成部分，用于精准定位HTML文档中的元素并施加样式规则。选择器的分类方式多样，从简单的基础选择器到复杂的组合选择器，每种类型都有其独特的语法和应用场景。

基础选择器

基础选择器是CSS中最简单的选择器类型，直接通过元素特征匹配目标。

元素选择器

通过HTML标签名称选择元素，例如选中所有<p>标签：

p {
  color: blue;
}

类选择器

通过class属性选择元素，语法为点号加类名。以下示例选中所有包含warning类的元素：

.warning {
  background-color: yellow;
}

ID选择器

通过id属性选择唯一元素，语法为井号加id值。注意文档中id应保持唯一：

#main-header {
  font-size: 2em;
}

通配选择器

星号*匹配文档所有元素，常用于重置样式：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

属性选择器

根据元素的属性及属性值进行匹配，方括号包裹属性名。

存在性选择器

匹配具有指定属性的元素，不论属性值：

[disabled] {
  opacity: 0.5;
}

精确匹配选择器

匹配属性值完全等于指定值的元素：

[type="submit"] {
  background-color: green;
}

包含匹配选择器

~=匹配属性值包含指定词（空格分隔）的元素：

[class~="primary"] {
  border: 2px solid gold;
}

前缀匹配选择器

^=匹配属性值以指定字符串开头的元素：

[href^="https"] {
  color: seagreen;
}

子串匹配选择器

*=匹配属性值包含子串的元素：

[src*="logo"] {
  width: 120px;
}

伪类选择器

用于选择处于特定状态的元素，以单冒号开头。

结构性伪类

根据元素在文档树中的位置选择：

li:first-child {
  font-weight: bold;
}
tr:nth-child(odd) {
  background: #eee;
}

交互性伪类

响应用户交互状态：

a:hover {
  text-decoration: underline;
}
input:focus {
  outline: 2px solid orange;
}

表单相关伪类

针对表单控件的特殊状态：

input:checked + label {
  color: red;
}
input:disabled {
  cursor: not-allowed;
}

伪元素选择器

双冒号语法选择元素的特定部分（CSS3规范建议使用双冒号）。

内容生成

在元素内容前后插入生成内容：

blockquote::before {
  content: "“";
  font-size: 3em;
}

文本片段选择

选择首行或首字母：

p::first-line {
  font-variant: small-caps;
}
h1::first-letter {
  font-size: 150%;
}

组合选择器

通过连接符组合多个简单选择器形成复杂选择逻辑。

后代组合器

空格连接，选择任意层级后代：

article p {
  line-height: 1.6;
}

子组合器

>连接，仅选择直接子元素：

ul > li {
  list-style-type: square;
}

相邻兄弟组合器

+连接，选择紧邻的兄弟元素：

h2 + p {
  margin-top: 0;
}

通用兄弟组合器

~连接，选择后续所有兄弟元素：

h3 ~ p {
  color: #666;
}

选择器组

逗号分隔的多个选择器共享相同样式声明：

h1, h2, h3 {
  font-family: sans-serif;
  color: #333;
}

特异性计算规则

当多条规则冲突时，通过特异性值决定优先级：

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

示例计算：

#nav .item:hover {} /* 100 + 10 + 10 = 120 */
div#header {}      /* 1 + 100 = 101 */

实际应用案例

导航菜单样式

/* 主菜单项 */
nav > ul > li {
  display: inline-block;
}

/* 二级下拉菜单 */
nav ul ul {
  position: absolute;
  display: none;
}

/* 悬停显示下拉菜单 */
nav li:hover > ul {
  display: block;
}

/* 当前页面菜单项高亮 */
nav a.current {
  border-bottom: 2px solid;
}

表单验证样式

input:valid {
  border-color: green;
}

input:invalid {
  border-color: red;
}

input:placeholder-shown {
  border-color: #ccc;
}

性能优化建议

1. 避免过度使用通配选择器
2. 减少深层嵌套的后代选择器
3. 对重复使用的选择器进行类化
4. 优先使用类选择器而非属性选择器

/* 不推荐 */
div#content ul li a {}

/* 推荐 */
.content-link {}