答案：通过将CSS选择器与媒体查询结合，可在不同屏幕条件下精准控制元素样式。例如，当视口宽度小于等于768px时，.container宽度变为100%，导航项垂直排列；大屏启用悬停效果，小屏增大点击区域或隐藏特定功能，实现响应式布局优化。
将CSS选择器与媒体查询结合，可以实现更精准的响应式设计。你可以在特定屏幕条件下，针对某个元素或某一类元素应用样式，让页面在不同设备上都有良好的显示效果。
基本语法结构
媒体查询通过 @media 规则包裹CSS样式块，在其中使用选择器来定位元素。只有当设备满足查询条件时，内部的选择器样式才会生效。
示例：
@media (max-width: 768px) {
.container {
width: 100%;
padding: 10px;
}
nav ul li {
display: block;
text-align: center;
}
}
这段代码表示：当视口宽度小于等于768px时，.container 宽度变为100%，导航列表项垂直排列并居中对齐。
结合类选择器与状态伪类
你可以将常见的类选择器、属性选择器甚至伪类（如 :hover、:focus）和媒体查询结合使用，控制交互行为在不同设备上的表现。
立即学习“前端免费学习笔记（深入）”；
常见用法：- 在大屏上启用悬停效果，在小屏上禁用以避免误触
- 移动端调整按钮点击区域大小
@media (min-width: 1024px) {
.btn:hover {
background-color: #0056b3;
}
}
@media (max-width: 480px) {
input[type="submit"] {
height: 44px;
font-size: 16px;
}
}
针对特定设备优化布局
利用媒体查询检测设备特性（如屏幕方向、分辨率、触摸支持），再配合结构化选择器调整DOM结构中的特定部分。
例如横屏与竖屏不同样式：
@media (orientation: landscape) and (max-height: 500px) {
.hero-text {
font-size: 18px;
padding: 10px;
}
}
又如使用属性选择器在平板上隐藏某些功能入口：
@media (max-width: 800px) {
[data-role="advanced-setting"] {
display: none;
}
}
基本上就这些。关键是把选择器写准确，媒体条件设合理，就能做到“在哪种设备下，对哪些元素做什么调整”。不复杂但容易忽略细节。 
