媒體查詢隱藏第1個要素不起作用

Question

我有幾個<hr />和我在媒體使用下面的CSS查詢

hr:first-child { 

沒有運氣，爲什麼呢？我的媒體查詢的範圍是好的，其他類的工作很好，但沒有這個，我想知道.. ??

Answer 1

試試這個：

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

由於選擇的名字所暗示的，:first-child指元素的第一個孩子，:first-of-type指型的第一要素。我相信你正在尋找後者。

Answer 2

您也可以嘗試這樣的：

<hr class="hideinsmallscreen" />

變化，只要你想.hideinsmallscreen

在媒體查詢，你可以使用類隱藏類名<hr/>

.hideinsmallscreen{ 
    display:none; 
    } 

Answer 3

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

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

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

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