通过CSS媒体查询与选择器结合可实现响应式隐藏元素，如使用类名.hidden-sm在屏幕宽度≤768px时设置display: none，或利用属性选择器[data-hide-on-small]在576px以下隐藏内容，还可通过结构伪类如:last-child在移动端隐藏特定子元素，建议优先用display: none并配合aria-hidden提升可访问性，保持类名一致以增强维护性。
响应式设计中，隐藏元素常用于在不同设备上优化布局。通过结合CSS 媒体查询（@media） 与 CSS选择器，可以灵活控制元素在特定屏幕尺寸下的显示状态。
使用媒体查询配合类选择器隐藏元素
最常见的方法是为需要隐藏的元素添加一个通用类名，然后在媒体查询中根据屏幕宽度设置 display: none。
例如：
.hidden-sm { display: block; }
@media (max-width: 768px) {
.hidden-sm { display: none; }
}
HTML中使用：
在小屏幕上隐藏
立即学习“前端免费学习笔记（深入）”；
这样，在屏幕宽度小于等于768px时，该元素将被隐藏。
结合属性选择器实现更灵活控制
你也可以利用属性选择器，比如通过自定义数据属性来控制响应式行为。
例如，定义一个属性 data-hide-on-small：
[data-hide-on-small] {
display: block;
}
@media (max-width: 576px) {
[data-hide-on-small] {
display: none;
}
}
HTML中：
小屏幕不显示这段文字
这种方法语义清晰，便于维护。
使用伪类与媒体查询组合（进阶技巧）
虽然不能直接在媒体查询中使用伪类来“隐藏”元素，但可以结合结构选择器动态控制。
比如，你想在移动端隐藏某个列表中的最后一项：
@media (max-width: 480px) {
.list-item:last-child {
display: none;
}
}
适用于适配移动菜单、隐藏多余按钮等场景。
实用建议与注意事项
隐藏元素时，注意以下几点以提升用户体验和可访问性：
- 优先使用 display: none 彻底隐藏并脱离文档流
- 避免使用 visibility: hidden 或 opacity: 0，除非需要保留空间或动画效果
- 考虑屏幕阅读器体验，必要时添加 aria-hidden="true"
- 命名类时保持一致性，如 .hide-mobile、.show-desktop 等
基本上就这些。合理组合媒体查询和选择器，能让响应式隐藏更简洁高效。关键是根据项目结构选择合适的方法，保持代码可读性和可维护性。
