通过CSS选择器与媒体查询结合，可实现响应式设计；2. 使用元素选择器配合max-width，调整导航栏在移动端为垂直布局；3. 利用类选择器.card与min-width和max-width，使卡片在平板上两列显示；4. 结合属性选择器img[alt*="hero"]与orientation查询，在横屏时调整图片尺寸；5. 核心在于精准选择元素并根据设备条件应用样式。
在实际开发中，将CSS选择器与媒体查询结合使用，可以实现更精细的响应式设计。通过在特定屏幕条件下对特定元素应用样式，让页面在不同设备上都有良好的视觉效果。
比如一个常见的导航栏，在桌面端显示为横向布局，而在移动端则变为垂直折叠菜单。可以这样写：
这里使用了元素选择器 nav、a 和 ul，并配合媒体查询限制最大宽度，实现适配。
假设有一个带 .card 类的卡片组件，希望在平板（如 769px - 1024px）上每行显示两列，可以这样控制：
立即学习“前端免费学习笔记（深入）”；
这里使用类选择器 .card，并结合复合媒体查询条件，精准控制中等屏幕下的布局。
有时希望在横屏手机上显示更大的图片，在竖屏时缩小。可以结合属性选择器和 orientation 查询：
这里使用属性选择器匹配 alt 属性包含 "hero" 的图片，并在横屏小高度设备中调整其尺寸。
基本上就这些常见用法。关键是把选择器的精确性与媒体查询的条件判断结合起来，做到“在哪种设备下，对哪些元素做什么调整”。不复杂但容易忽略细节。
以上就是css选择器和媒体查询结合使用实例的详细内容，更多请关注php中文网其它相关文章！