今天我们来聊聊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选择器就像获得了网页样式的魔法钥匙。记住：
• 从简单选择器开始，逐步掌握复杂选择器 • 理解选择器优先级，避免样式冲突 • 保持代码简洁可维护
優(yōu)網(wǎng)科技，優(yōu)秀企業(yè)首選的互聯(lián)網(wǎng)供應(yīng)服務(wù)商
優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營(yíng)理念，誠(chéng)信務(wù)實(shí)的服務(wù)了近萬家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營(yíng)銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動(dòng)端應(yīng)用（手機(jī)站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號(hào)：
專屬顧問
