CSS选择器与媒体查询入门教程

**CSS选择器与媒体查询实战教程：打造精细化响应式设计** 想让你的网页在各种设备上都能完美呈现吗？本文将带你深入了解CSS选择器与媒体查询的强大组合，通过实际案例，教你如何利用它们实现精细化的响应式设计。我们将学习如何使用元素选择器、类选择器和属性选择器，结合`max-width`、`min-width`和`orientation`等媒体查询条件，针对不同屏幕尺寸和设备方向，精准地调整导航栏、卡片布局和图片尺寸。掌握这些技巧，你就能轻松打造出在任何设备上都能提供最佳用户体验的网页，让你的网站更具吸引力。核心在于精准选择元素并根据设备条件应用样式。

通过CSS选择器与媒体查询结合，可实现响应式设计；2. 使用元素选择器配合max-width，调整导航栏在移动端为垂直布局；3. 利用类选择器.card与min-width和max-width，使卡片在平板上两列显示；4. 结合属性选择器img[alt*="hero"]与orientation查询，在横屏时调整图片尺寸；5. 核心在于精准选择元素并根据设备条件应用样式。

在实际开发中，将CSS选择器与媒体查询结合使用，可以实现更精细的响应式设计。通过在特定屏幕条件下对特定元素应用样式，让页面在不同设备上都有良好的视觉效果。

针对不同屏幕尺寸调整导航栏样式

比如一个常见的导航栏，在桌面端显示为横向布局，而在移动端则变为垂直折叠菜单。可以这样写：

/* 桌面端：横向排列 */
nav ul {
  display: flex;
  list-style: none;
}
nav a {
  padding: 15px;
  text-decoration: none;
}
<p>/<em> 移动端：垂直堆叠 </em>/
@media (max-width: 768px) {
nav ul {
flex-direction: column;
}
nav a {
padding: 10px;
font-size: 14px;
}
}</p>

这里使用了元素选择器 nav、a 和 ul，并配合媒体查询限制最大宽度，实现适配。

为特定类在平板设备上调整布局

假设有一个带 .card 类的卡片组件，希望在平板（如 769px - 1024px）上每行显示两列，可以这样控制：

.card {
  width: 100%;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid #ddd;
  padding: 15px;
}
<p>@media (min-width: 769px) and (max-width: 1024px) {
.card {
width: 48%;
display: inline-block;
}
.card + .card {
margin-left: 2%;
}
}</p>

这里使用类选择器 .card，并结合复合媒体查询条件，精准控制中等屏幕下的布局。

根据设备方向改变图片大小

有时希望在横屏手机上显示更大的图片，在竖屏时缩小。可以结合属性选择器和 orientation 查询：

img[alt*="hero"] {
  max-width: 100%;
  height: auto;
}
<p>/<em> 横屏时放大 </em>/
@media (orientation: landscape) and (max-height: 500px) {
img[alt*="hero"] {
max-width: 80%;
}
}</p>

这里使用属性选择器匹配 alt 属性包含 "hero" 的图片，并在横屏小高度设备中调整其尺寸。

基本上就这些常见用法。关键是把选择器的精确性与媒体查询的条件判断结合起来，做到“在哪种设备下，对哪些元素做什么调整”。不复杂但容易忽略细节。

终于介绍完啦！小伙伴们，这篇关于《CSS选择器与媒体查询入门教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！