今天我们来聊聊CSS中最基础也最强大的部分——选择器。无论你是前端新手还是有一定经验的开发者，掌握CSS选择器都能让你的样式编写事半功倍！
一、基础选择器：网页样式的敲门砖
1. 元素选择器：最直接的选择方式
/* 所有段落变蓝 */
p {
color: blue;
}2. 类选择器：灵活多变的样式控制
/* 所有高亮元素 */
.highlight {
background-color: yellow;
}3. ID选择器：精准定位（慎用）
/* 页面头部样式 */
#header {
position: sticky;
top: 0;
}小贴士：ID选择器虽然精准，但复用性差，建议优先使用类选择器。
二、组合选择器：元素关系的艺术
1. 后代选择器（空格）：选择所有层级
article p {
font-size: 16px;
}2. 子代选择器（>）：只选直系后代
ul > li {
list-style: square;
}3. 兄弟选择器（+和~）：相邻元素控制
/* 紧接在h2后的段落 */
h2 + p {
font-weight: bold;
}
/* h2后的所有段落 */
h2 ~ p {
color: gray;
}三、属性选择器：智能匹配元素
1. 基本属性选择
[title] {
cursor: help;
}2. 高级匹配技巧
/* 包含"btn"的class */
[class*="btn"] {
cursor: pointer;
}
/* 以https开头的链接 */
[href^="https"] {
color: green;
}
/* .jpg结尾的图片 */
[src$=".jpg"] {
border: 1px solid #ddd;
}四、伪类与伪元素：超越DOM的选择
1. 常用伪类
/* 鼠标悬停效果 */
a:hover {
text-decoration: underline;
}
/* 表格斑马纹 */
tr:nth-child(odd) {
background: #f2f2f2;
}2. 实用伪元素
/* 引用前后加引号 */
.quote::before {
content: "\201C";
}
/* 首字母大写 */
p::first-letter {
font-size: 2em;
}五、优先级与最佳实践
1. 优先级计算规则
• 内联样式 > ID > 类/属性/伪类 > 元素/伪元素 • !important强制最高优先级（慎用）
2. 专业建议
1. 避免过度嵌套（不超过3层） 2. 多用类选择器，少用ID选择器 3. 合理使用属性选择器减少类名 4. 利用组合选择器精确控制范围
六、实战案例：导航菜单样式
/* 主菜单样式 */
.nav > li {
display: inline-block;
position: relative;
}
/* 下拉菜单 */
.navli:hover > ul {
display: block;
}
/* 当前菜单项 */
.nav.active {
font-weight: bold;
color: #3498db;
}
/* 外部链接标识 */
[href^="http"]::after {
content: " ↗";
}结语
掌握CSS选择器就像获得了网页样式的魔法钥匙。记住：
• 从简单选择器开始，逐步掌握复杂选择器 • 理解选择器优先级，避免样式冲突 • 保持代码简洁可维护
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
