媒體查詢來隱藏第一個元素不起作用

Question

我有幾個<hr /> ，我在媒體查詢中使用以下CSS

hr:first-child {

沒有運氣，為什么？ 我的媒體查詢范圍還可以，其他課程都可以，但是這還不行，我想知道。

Answer 1

嘗試這個：

hr:first-of-type
{
display:none;
}

就像選擇器的名稱所暗示的那樣:first-child指元素的第一個子元素，而:first-of-type指該類型的第一個元素。 我相信您正在尋找后者。

Answer 2

要選擇第一個HR您需要使用

hr:first-of-type {display: none; }

使用:first-child偽選擇器選擇每個hr元素，它是其父元素的第一個孩子。

使用:first-of-type偽選擇器選擇其父元素的第一個hr元素

Answer 3

您也可以嘗試以下操作：

<hr class="hideinsmallscreen" />

根據需要更改類名.hideinsmallscreen

在媒體查詢中，您可以使用該類來隱藏<hr/>

.hideinsmallscreen{
     display:none;
  }