通过结合CSS选择器与媒体查询，可精准控制不同设备上的样式表现。使用类选择器实现布局切换，如桌面三栏、移动端单列；属性选择器识别设备特性，为触控设备增大按钮点击区；结构伪类选择器动态调整列表项，小屏仅显前三项；组合选择器提升样式精度，实现导航菜单的响应式折叠。合理运用选择器与媒体查询，使响应式设计灵活可控，关键在于理解优先级与条件含义。
在现代网页开发中，响应式设计已成为标配。通过将CSS选择器与媒体查询结合使用，开发者可以更精准地控制不同设备上的样式表现。这种方式不仅提升了用户体验，也增强了代码的可维护性。
利用类选择器配合媒体查询实现布局切换
常见的响应式需求是在不同屏幕尺寸下调整元素布局。例如，一个三栏布局在桌面端正常显示，但在移动端应变为单列堆叠。
可以通过为容器设置特定类名，并在媒体查询中重新定义其子元素的显示方式：
.container .column {
width: 33.33%;
float: left;
}
@media (max-width: 768px) {
.container .column {
width: 100%;
float: none;
}
}
这样，当屏幕宽度小于等于768px时，所有带有.column类的元素会自动占满整行，形成垂直排列。
立即学习“前端免费学习笔记（深入）”；
属性选择器用于识别设备特性
CSS属性选择器能匹配具有特定HTML属性的元素，结合媒体查询可用于针对某些设备特征应用样式。
比如，希望仅在支持触控的设备上增大按钮点击区域：
button[type="submit"] {
padding: 10px;
}
@media (hover: none) and (pointer: coarse) {
button[type="submit"] {
padding: 16px;
font-size: 18px;
}
}
这里(hover: none)和(pointer: coarse)通常出现在移动设备或平板上，说明用户无法悬停且指针精度较低。此时增强交互友好性更有意义。
结构伪类选择器优化响应式列表
使用:nth-child、:first-of-type等伪类选择器，可以在不同断点下动态调整列表项样式。
例如，在小屏幕上只显示前三个项目，并隐藏其余内容：
.item {
display: block;
}
@media (max-width: 480px) {
.item:nth-child(n+4) {
display: none;
}
}
这种写法简洁高效，避免了JavaScript干预，适合静态内容的响应式裁剪。
组合选择器提升媒体查询精度
有时需要对特定组件在特定条件下应用样式。通过组合ID、类、伪类等多种选择器，可大幅提高样式的针对性。
例如，导航菜单在桌面端水平排列，在移动端折叠为汉堡菜单：
#nav-menu > .nav-item {
display: inline-block;
}
@media (max-width: 768px) {
#nav-menu.compact > .nav-item {
display: block;
}
#nav-menu.compact > .nav-item + .nav-item {
margin-top: 8px;
}
}
这种结构确保只有当菜单拥有compact类且屏幕较小时才启用垂直样式，防止意外样式冲突。
基本上就这些。合理组合CSS选择器与媒体查询，能让响应式样式既灵活又可控，关键在于理解选择器的优先级和媒体条件的实际含义。不复杂但容易忽略细节。
