CSS 选择器入门

一、CSS 选择器基础：快速掌握核心概念

1. 什么是选择器？
   CSS 选择器就像 “网页元素的遥控器”，用于定位 HTML 中的特定元素并应用样式。

   /* 结构：选择器 { 属性: 值; } */
   p { color: red; }  /* 选择所有<p>元素，文字变红 */
   

2. 元素选择器（标签选择器）

   • 直接用 HTML 标签名作为选择器（如 div, h1, a）。
   • 作用于页面中所有该类型的元素。

   h2 { font-size: 20px; }  /* 所有<h2>标题字体大小为20px */
   img { border: 1px solid gray; }  /* 所有图片添加边框 */
   

3. 类选择器（Class Selector）

   • 通过元素的 class 属性匹配，可复用（一个元素可拥有多个类）。
   • 命名规则：
     • 必须以 . 开头（如 .highlight）。
     • 只能包含字母、数字、连字符（-）、下划线（_）。
     • 不能以数字开头，不能包含空格。

     <!-- HTML -->
     <p class="error-message">这是错误提示</p>
     

      

     /* CSS */
     .error-message { color: red; }  /* 所有class="error-message"的元素变红 */
     .btn-primary { background: blue; }  /* 主按钮样式 */
     

4. ID 选择器

   • 通过元素的 id 属性匹配，必须唯一（一个页面中不能重复）。
   • 命名规则与类相似，但以 # 开头（如 #header）。

   <!-- HTML -->
   <div id="main-content">内容区域</div>
   

   /* CSS */
   #main-content { width: 800px; }  /* id="main-content"的元素宽度为800px */
   

5. 通配符选择器（*）

   • 匹配所有元素，常用于全局样式重置。

   * { margin: 0; padding: 0; }  /* 所有元素的边距重置为0 */
   

二、组合选择器：多条件筛选元素

1. 后代选择器（空格分隔）

   • 选择某个元素内部的所有后代元素（无论嵌套多深）。

   article p { line-height: 1.6; }  /* 所有<article>内的<p>元素行高为1.6 */
   

2. 子选择器（>`）

   • 只选择某个元素的直接子元素（一级子元素）。

   nav > ul { background: lightgray; }  /* 导航栏(nav)的直接子元素<ul>添加背景色 */
   

3. 相邻兄弟选择器（+）

   • 选择紧接在另一个元素后的同级元素。

   h3 + p { margin-top: 10px; }  /* 每个<h3>后的第一个<p>元素顶部边距为10px */
   

4. 通用兄弟选择器（~）

   • 选择前面某个元素后的所有同级元素。

   img ~ figcaption { font-style: italic; }  /* 每个<img>后的所有<figcaption>变斜体 */
   

三、属性选择器：按元素属性筛选

通过元素的属性或属性值来选择元素。

[disabled] { opacity: 0.5; }  /* 所有带disabled属性的元素透明度降低 */
a[target="_blank"] { color: purple; }  /* 所有打开新窗口的链接变紫色 */
input[type="email"] { border-color: blue; }  /* 邮箱输入框边框变蓝 */

四、伪类选择器（Pseudo-classes）

定义：伪类用于选择处于特定状态或位置的元素，以冒号 : 开头。

1. 动态伪类（用户交互状态）

a:hover { color: red; }          /* 鼠标悬停时链接变红 */
button:active { background: blue; } /* 按钮被点击时背景变蓝 */
input:focus { outline: 2px solid green; } /* 输入框获得焦点时显示绿色边框 */
a:visited { color: purple; }     /* 已访问链接变紫色 */

2. 结构伪类（位置关系）

li:first-child { font-weight: bold; }      /* 第一个列表项加粗 */
li:last-child { border-bottom: none; }     /* 最后一个列表项去掉下边框 */
p:nth-child(even) { background: #f0f0f0; } /* 偶数位置的段落添加浅灰色背景 */
p:nth-child(3) { color: blue; }            /* 第三个段落变蓝色 */
p:nth-of-type(odd) { font-style: italic; } /* 奇数位置的<p>元素变斜体 */

3. 逻辑伪类（条件筛选）

:not(.highlight) { opacity: 0.8; }         /* 非.highlight类的元素透明度降低 */
input:required { border: 1px solid red; }  /* 必填字段添加红色边框 */
input:disabled { background: #eee; }       /* 禁用的输入框添加灰色背景 */

4. 目标伪类（URL 锚点）

:target { background: yellow; }            /* 当前URL锚点对应的元素高亮 */

五、伪元素选择器（Pseudo-elements）

定义：伪元素用于选择元素的特定部分（如首字母、内容前后插入的虚拟元素），以双冒号 :: 开头（单冒号也兼容）。

1. 内容插入伪元素

p::before {
  content: "▶ ";           /* 在每个<p>元素前插入箭头符号 */
  color: red;
}

p::after {
  content: " ✅";          /* 在每个<p>元素后插入对勾符号 */
}

blockquote::before {
  content: open-quote;    /* 插入左引号 */
  font-size: 2em;
}

2. 文本片段伪元素

p::first-letter {
  font-size: 2em;         /* 段落首字母放大 */
  font-weight: bold;
  float: left;
  margin-right: 5px;
}

p::first-line {
  color: blue;            /* 段落首行变蓝色 */
}

3. 选中状态伪元素

::selection {
  background: purple;     /* 用户选中文本时的背景色 */
  color: white;           /* 用户选中文本时的文字颜色 */
}

4. 输入框占位符伪元素

input::placeholder {
  color: #999;            /* 输入框占位文本变灰色 */
  font-style: italic;
}

六、选择器优先级：解决样式冲突

当多个选择器作用于同一元素时，优先级由高到低：

1. 内联样式（如 <div style="color: red">）
2. ID 选择器（#id）
3. 类 / 属性 / 伪类选择器（.class, [attr], :hover）
4. 元素 / 伪元素选择器（p, ::before）
5. 通配符（*）

记忆口诀：

• ID（最高） → Class → Element（最低），简称 ICE 原则。
• 相同优先级时，后定义的样式生效。
• !important 可强制提升优先级（但尽量避免使用）。

七、初学者常见误区

1. 滥用 ID 选择器
   ID 必须唯一，应优先使用类选择器实现复用。

2. 过度嵌套选择器
   避免深层后代选择器（如 div ul li a），优先使用类直接定位。

3. 忽略继承
   颜色、字体等属性会自动继承，无需为每个元素重复定义。

八、实战练习：选择器应用场景

<!-- HTML 示例 -->
<header class="site-header">
  <nav>
    <ul>
      <li><a href="#" class="active">首页</a></li>
      <li><a href="#">产品</a></li>
    </ul>
  </nav>
</header>

/* CSS 选择器示例 */
.site-header { background: #333; }  /* 类选择器 */
nav ul { list-style: none; }       /* 后代选择器 */
nav > ul > li { display: inline-block; }  /* 子选择器 */
a.active { color: white; }         /* 组合类选择器 */

总结：选择器是 CSS 的基石

通过系统学习选择器，你可以精准控制网页的每一个元素。建议结合实际项目练习，加深对不同选择器的理解和运用。