WordPress员工模块display:none失效问题求助

首先，你的核心思路是完全合理的：用媒体查询在小屏设备上隐藏过长的员工简介，避免布局错乱，这是移动端适配的常用手段。但你的媒体查询没生效，问题出在CSS选择器的写法错误。

错误原因分析 #

看你的HTML结构：

<span id="info">
  <h3><?php the_field('whoweare_name1'); ?></h3>
  <p class="bio"><?php the_field('whoweare_text1'); ?></p>
</span>

你写的选择器是 .staff .brick .details #info .bio p —— 但这里的 .bio 本身就是 <p> 标签的类名，相当于你在找「带有bio类的元素下面的p标签」，而实际上带有bio类的就是p标签本身，多了一层多余的 p，导致选择器匹配不到目标元素。

修正后的媒体查询代码 #

把选择器改成直接匹配带.bio类的p标签即可：

@media only screen and (min-width: 750px) and (max-width: 960px) {
  .staff .brick .details #info .bio { 
    display: none; 
  }
}

如果全局没有同名类的冲突，甚至可以简化成更简洁的写法：

@media only screen and (min-width: 750px) and (max-width: 960px) {
  .bio { 
    display: none; 
  }
}

关于方案是否最优 #

直接隐藏简介是最快速的解决方法，但从用户体验角度，可以做一些优化：

• 添加展开按钮：在移动端显示一个「查看完整简介」的小按钮，点击后通过JS或者CSS伪类（比如用checkbox控制）展开简介，既解决布局问题，又不丢失信息；
• 多行文本截断：如果不想完全隐藏，可以尝试多行截断（比如用-webkit-line-clamp），但这个方法兼容性有限，且只适合固定行数的截断，对于超长简介来说，体验不如「隐藏+展开」友好。

另外，注意检查CSS优先级：如果你的简介样式被其他更高优先级的规则覆盖（比如#info p），可以适当提高选择器优先级，比如写成#info .bio，或者临时用!important（不推荐长期使用，尽量通过选择器层级解决）。

内容的提问来源于stack exchange，提问作者Mike.Whitehead