如何隐藏特定的HTML段落元素

Question

我想隐藏<p>class="color-grey-9" Rate</p>元素。

<div> class="detail-desc"

    <p>class="color-grey-9" Category</p>
    <p>class="color-grey-9" Rate</p>
    <p>class="color-grey-9" Country</p>

</div>

Answer 1

首先，您的类设置不正确，您可以在CSS文件中应用隐藏属性。

.color-grey-9-hidden {
  display: none;
}

<div class="detail-desc"> 
  <p class="color-grey-9">Category</p>
  <p class="color-grey-9-hidden">Rate</p>
  <p class="color-grey-9">Country</p>
</div>

Answer 2

使用CSS 3选择器来应用您的样式，在这种情况下，我使用:nth-of-type(n)选择器，该选择器匹配其父类的特定类型的第n个子元素。使用:nth-of-type(n)您无需引入任何其他hidden类。

使用display:none隐藏元素，它在页面中不可用，并且不会占用任何空间。

使用visibility:hidden隐藏元素，当可见时，它仍将占用与之前相同的空间。

＆＃13;

＆＃13;

.color-grey-9:nth-of-type(2){
  display:none;
}

＆＃13;

<div class="detail-desc">
  <p class="color-grey-9">Category</p>
  <p class="color-grey-9">Rate</p>
  <p class="color-grey-9">Country</p>
</div>

＆＃13;

＆＃13;

＆＃13;