CSS选择符
CSS（层叠样式表）选择符用于定位 HTML 文档中的元素并为其应用样式。以下是常见的 CSS 选择符分类及示例：
1. 基础选择器
元素选择器
- 通过 HTML 元素名称选择。
p { color: red; } /* 所有 <p> 元素 */
类选择器（Class Selector）
- 通过元素的
class属性选择，以.开头。.highlight { background-color: yellow; } /* 所有 class="highlight" 的元素 */
ID 选择器
- 通过元素的
id属性选择，以#开头（一个页面中 ID 唯一）。#header { font-size: 24px; } /* id="header" 的元素 */
通配符选择器
- 选择所有元素。
* { margin: 0; padding: 0; } /* 所有元素 */
2. 组合选择器
后代选择器
- 选择某元素内的所有后代元素。
div p { color: blue; } /* div 内的所有 <p> 元素 */
子元素选择器（Child Selector）
- 选择直接子元素。
ul > li { list-style: none; } /* ul 的直接子元素 <li> */
相邻兄弟选择器（Adjacent Sibling）
- 选择紧随其后的同级元素。
h1 + p { font-weight: bold; } /* 紧跟在 h1 后的第一个 <p> */
通用兄弟选择器（General Sibling）
- 选择所有后续同级元素。
h2 ~ p { color: green; } /* h2 之后的所有同级 <p> */
3. 属性选择器
- 根据元素的属性及值选择元素。
[type="text"] { border: 1px solid #ccc; } /* 所有 type="text" 的元素 */ a[href^="https"] { color: purple; } /* href 以 https 开头的 <a> */ img[alt~="logo"] { width: 100px; } /* alt 属性包含 "logo" 的 <img> */
4. 伪类选择器（Pseudo-classes）
- 根据元素的状态或位置选择。
a:hover { text-decoration: underline; } /* 鼠标悬停时的 <a> */ li:nth-child(2n) { background: #f0f0f0; } /* 偶数位置的 <li> */ input:focus { outline: 2px solid blue; } /* 获取焦点的输入框 */
5. 伪元素选择器（Pseudo-elements）
- 选择元素的特定部分。
p::first-line { font-weight: bold; } /* 段落的第一行 */ .quote::before { content: "“"; } /* 在元素前插入内容 */ .highlight::selection { background: pink; } /* 被选中的文本 */
6. 分组选择器
- 同时选择多个元素。
h1, h2, h3 { font-family: Arial; } /* 同时设置 h1、h2、h3 */
优先级规则
选择器的优先级由权重决定，权重从高到低依次为：
!important- 内联样式（如
style="..."） - ID 选择器（
#id） - 类、属性、伪类选择器（
.class,[type],:hover） - 元素、伪元素选择器（
div,::before） - 通配符、继承的样式（
*）
示例场景
/* 导航栏高亮当前页 */
.nav a.active { color: red; }
/* 表格隔行变色 */
tr:nth-child(odd) { background: #f8f8f8; }
/* 必填输入框标记 */
input[required]::after { content: "*"; color: red; }
理解 CSS 选择符是编写高效、可维护样式表的关键！
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
