CSS选择器高级用法：精准控制样式
引言
CSS选择器是CSS的核心组成部分，它决定了哪些元素会应用特定的样式规则。掌握CSS选择器的高级用法，可以让你更加精准地控制页面元素的样式，提高代码的可读性和可维护性。本文将深入探讨CSS选择器的高级用法，帮助你成为CSS选择器的专家。
基本选择器回顾
在深入高级选择器之前，让我们先回顾一下基本的CSS选择器：
- 元素选择器：
p { color: red; } - 类选择器：
.class { color: red; } - ID选择器：
#id { color: red; } - 通配符选择器：
* { margin: 0; padding: 0; }
组合选择器
后代选择器
选择某个元素的所有后代元素：
/* 选择div内的所有p元素 */ div p { color: blue; }子选择器
选择某个元素的直接子元素：
/* 选择div的直接子元素p */ div > p { color: blue; }相邻兄弟选择器
选择紧接在某个元素后的兄弟元素：
/* 选择p元素后的第一个div元素 */ p + div { margin-top: 20px; }通用兄弟选择器
选择某个元素后的所有兄弟元素：
/* 选择p元素后的所有div元素 */ p ~ div { margin-top: 10px; }伪类选择器
状态伪类
链接状态
/* 未访问的链接 */ a:link { color: blue; } /* 已访问的链接 */ a:visited { color: purple; } /* 鼠标悬停时 */ a:hover { color: red; } /* 激活状态 */ a:active { color: green; }表单状态
/* 获得焦点的输入框 */ input:focus { border-color: blue; outline: none; } /* 禁用的输入框 */ input:disabled { background-color: #f5f5f5; cursor: not-allowed; } /* 选中的复选框 */ input:checked { /* 样式 */ }结构伪类
位置伪类
/* 选择第一个子元素 */ ul li:first-child { font-weight: bold; } /* 选择最后一个子元素 */ ul li:last-child { color: red; } /* 选择第n个子元素 */ ul li:nth-child(2) { background-color: yellow; } /* 选择偶数位置的子元素 */ ul li:nth-child(even) { background-color: #f0f0f0; } /* 选择奇数位置的子元素 */ ul li:nth-child(odd) { background-color: #e0e0e0; } /* 选择前3个子元素 */ ul li:nth-child(-n+3) { color: blue; }类型伪类
/* 选择第一个某种类型的子元素 */ div p:first-of-type { font-size: 18px; } /* 选择最后一个某种类型的子元素 */ div p:last-of-type { font-style: italic; } /* 选择第n个某种类型的子元素 */ div p:nth-of-type(2) { color: green; }空元素和唯一子元素
/* 选择没有子元素的元素 */ div:empty { display: none; } /* 选择是其父元素唯一子元素的元素 */ p:only-child { color: red; } /* 选择是其父元素唯一某种类型子元素的元素 */ p:only-of-type { font-weight: bold; }否定伪类
/* 选择不是p元素的所有元素 */ :not(p) { margin: 0; } /* 选择没有class为special的p元素 */ p:not(.special) { color: gray; } /* 选择不是第一个子元素的li元素 */ ul li:not(:first-child) { margin-top: 10px; }伪元素选择器
常用伪元素
/* 在元素内容前插入内容 */ p::before { content: "→ "; color: red; } /* 在元素内容后插入内容 */ p::after { content: " ←"; color: blue; } /* 选择元素的第一个字母 */ p::first-letter { font-size: 2em; font-weight: bold; color: red; } /* 选择元素的第一行 */ p::first-line { font-weight: bold; color: blue; } /* 选择用户选择的文本 */ ::selection { background-color: yellow; color: black; }属性选择器
基本属性选择器
/* 选择具有某个属性的元素 */ [title] { color: red; } /* 选择属性值等于某个值的元素 */ [title="example"] { color: blue; } /* 选择属性值包含某个值的元素 */ [title*="example"] { color: green; } /* 选择属性值以某个值开头的元素 */ [title^="ex"] { color: purple; } /* 选择属性值以某个值结尾的元素 */ [title$="ple"] { color: orange; } /* 选择属性值包含某个完整单词的元素 */ [title~="example"] { color: pink; } /* 选择属性值以某个值开头且后面跟连字符的元素 */ [lang|="en"] { color: brown; }表单属性选择器
/* 选择类型为文本的输入框 */ input[type="text"] { width: 200px; } /* 选择类型为密码的输入框 */ input[type="password"] { width: 200px; } /* 选择类型为提交的按钮 */ input[type="submit"] { background-color: blue; color: white; }高级选择器组合
复杂选择器组合
/* 选择class为container的div内的第2个p元素 */ div.container > p:nth-child(2) { color: red; } /* 选择class为nav的ul内的所有li元素，且这些li元素不是最后一个子元素 */ ul.nav > li:not(:last-child) { margin-right: 20px; } /* 选择具有data-role属性且值为button的元素，当鼠标悬停时 */ [data-role="button"]:hover { background-color: #f0f0f0; } /* 选择表单中被禁用的输入框，且是只读的 */ input:disabled:read-only { background-color: #e0e0e0; }选择器优先级
CSS选择器的优先级从高到低：
- 内联样式：
style="color: red;" - ID选择器：
#id - 类选择器、伪类选择器、属性选择器：
.class,:hover,[attr] - 元素选择器、伪元素选择器：
div,::before
计算优先级的方法：
- 内联样式：1000
- ID选择器：100
- 类选择器、伪类选择器、属性选择器：10
- 元素选择器、伪元素选择器：1
/* 优先级：100 + 10 + 1 = 111 */ #container .item p { color: red; } /* 优先级：10 + 10 + 1 = 21 */ .container .item p { color: blue; } /* 优先级：100 + 1 = 101 */ #container p { color: green; }实际项目中的应用
导航栏样式
/* 导航栏基本样式 */ .nav { display: flex; list-style: none; padding: 0; margin: 0; } /* 导航项样式 */ .nav > li { position: relative; margin-right: 20px; } /* 导航链接样式 */ .nav > li > a { display: block; padding: 10px 15px; color: #333; text-decoration: none; transition: all 0.3s ease; } /* 导航链接悬停效果 */ .nav > li > a:hover { color: #007bff; } /* 下拉菜单样式 */ .nav > li > ul { position: absolute; top: 100%; left: 0; background: white; list-style: none; padding: 0; margin: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); opacity: 0; visibility: hidden; transition: all 0.3s ease; } /* 下拉菜单项样式 */ .nav > li > ul > li { width: 200px; } /* 下拉菜单链接样式 */ .nav > li > ul > li > a { display: block; padding: 10px 15px; color: #333; text-decoration: none; transition: all 0.3s ease; } /* 下拉菜单链接悬停效果 */ .nav > li > ul > li > a:hover { background-color: #f0f0f0; color: #007bff; } /* 鼠标悬停在导航项上时显示下拉菜单 */ .nav > li:hover > ul { opacity: 1; visibility: visible; } /* 最后一个导航项没有右边距 */ .nav > li:last-child { margin-right: 0; }表单样式
/* 表单容器 */ .form-container { max-width: 600px; margin: 0 auto; padding: 20px; } /* 表单组 */ .form-group { margin-bottom: 20px; } /* 标签样式 */ .form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #333; } /* 输入框样式 */ .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="password"], .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; transition: all 0.3s ease; } /* 输入框获得焦点时的样式 */ .form-group input[type="text"]:focus, .form-group input[type="email"]:focus, .form-group input[type="password"]:focus, .form-group textarea:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 3px rgba(0,123,255,0.1); } /* 复选框和单选按钮 */ .form-group input[type="checkbox"], .form-group input[type="radio"] { margin-right: 5px; } /* 提交按钮 */ .form-group input[type="submit"] { background-color: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 4px; font-size: 16px; cursor: pointer; transition: all 0.3s ease; } /* 提交按钮悬停效果 */ .form-group input[type="submit"]:hover { background-color: #0056b3; } /* 禁用的表单元素 */ .form-group input:disabled, .form-group textarea:disabled { background-color: #f5f5f5; cursor: not-allowed; } /* 必填字段标记 */ .form-group label::after { content: " *"; color: red; } /* 没有required属性的标签不显示星号 */ .form-group label:not(:has(+ input[required]))::after { content: ""; }性能优化
- 避免使用通配符选择器：通配符选择器会匹配所有元素，影响性能
- 避免使用过度复杂的选择器：复杂选择器会增加浏览器的计算负担
- 使用类选择器代替元素选择器：类选择器的优先级更高，计算更快
- 避免使用后代选择器：后代选择器会遍历所有后代元素，影响性能
- 合理使用ID选择器：ID选择器优先级最高，但过度使用会导致样式难以维护
总结
CSS选择器是CSS的核心，掌握高级选择器的使用方法，可以让你更加精准地控制页面元素的样式，提高代码的可读性和可维护性。通过本文的学习，你应该掌握了：
- 组合选择器的使用：后代选择器、子选择器、兄弟选择器
- 伪类选择器的使用：状态伪类、结构伪类、否定伪类
- 伪元素选择器的使用：::before、::after、::first-letter等
- 属性选择器的使用：基本属性选择器、表单属性选择器
- 高级选择器组合：复杂选择器的组合使用
- 选择器优先级：如何计算和理解选择器的优先级
- 实际项目中的应用：导航栏样式、表单样式等
- 性能优化：如何优化选择器的性能
在实际开发中，我们应该根据具体需求，选择合适的选择器，平衡代码的可读性、可维护性和性能。通过不断学习和实践，你将能够掌握CSS选择器的精髓，为你的项目创造出更加出色的样式效果。
