CSS - 显示：无操作不起作用答案

【问题标题】：CSS - display:none action not workingCSS - 显示：无操作不起作用
【发布时间】：2018-01-04 11:47:36
【问题描述】：

我在我正在构建的 Wordpress 网站上有一个员工部分，每个员工图像上都有悬停效果，显示他们的姓名、职位和简历。

员工简历很长，客户不愿意更改它们，但是，在查看对平板电脑/手机屏幕尺寸的影响时，简历不适合较小的图像。

我已尝试更改字体大小，但如果我进一步减小它，文本将无法阅读。

我想要在媒体查询中做的不是更改简历大小，而是屏蔽简历，只需使用 display:none; 为 bio  标签留下名称和标题，但我无法让它工作.

这是最好的方法吗？

这是其中一张图片的代码 -

html/php

 <div class="staff">
   <div class="masonry">            
     <div class="brick">  
       <?php if( get_field('whoweare_image1') ): ?>
         <img src="<?php the_field('whoweare_image1'); ?>" />
       <?php endif; ?>
       <div class="details">     
         <span id="info">  
           <h3><?php the_field('whoweare_name1'); ?></h3>  
           <p class="bio"><?php the_field('whoweare_text1'); ?></p>  
         </span> 
       </div>     
     </div>
     <!-- identical code for other staff member images -->
  </div>
</div>

这就是我尝试过的媒体查询（用于 ipad/平板电脑肖像） -

style.css

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

在我尝试了下面的 CSS 规则后，我将 bio 类添加到了  标签中，它屏蔽了包括名称/标题在内的整个文本 -

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

我们将不胜感激。

【问题讨论】：

根据您的标记，选择器应为 .staff .brick .details #info p.bio。
我想说的一件事是尽量不要对你的 css 选择器过于具体，以及为你的 css 文件增加更多的大小，它会增加更多的处理负载，因此会减慢你的页面速度，它也会使它很难维护，因为这意味着如果您需要覆盖类的实例，您将尝试找到更具体的选择器。一些好文章：css-tricks.com/specifics-on-css-specificity，css-tricks.com/strategies-keeping-css-specificity-low
@Pete 谢谢，你是对的。选择器很容易陷入困境。令人沮丧的是，如果我使用 h3，那么它可以工作 - h3 文本不会显示，但它不会为 p 标签文本显示。
您是否尝试将选择器更改为正确的？如果你这样做了并且它仍然显示，那么我会说你的特异性噩梦已经开始，因为会有一种风格在某处覆盖它。检查元素并查看是否有覆盖某处的显示样式。还要确保您的媒体查询包含在任何原始样式之后，因为 css 规则的顺序也很重要

标签： html css responsive-design media-queries

【解决方案1】：

选择器必须是

.staff .brick .details #info p.bio { ... }

（“bio”是应用于p标签的类）

【讨论】：

我试过了，但没有用。令人沮丧的是，如果我将 p 替换为 h3 则它可以工作 - h3 不会显示，但它不会为 p 标签执行此操作。

【解决方案2】：

你的目标错了

@media only screen and (min-width: 750px) and (max-width: 960px) {

     .staff .brick .details #info p.bio {
        display: none;
    }

}

https://jsfiddle.net/pcto2Lkj/1/

【讨论】：

【解决方案3】：

你可以像下面的css样式那样做。

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

【讨论】：

【解决方案4】：

仔细检查了元素后，我发现 Wordpress 做了一件奇怪的事情，并在  标签中添加了一个类 - 所以我定位了这个属性并且它起作用了 -

 .staff .brick .details #info p.p2  {
        display: none ;
    }

我不完全理解为什么要创建这些属性，但是，这已经解释了为什么  标记不起作用。

【讨论】：