媒体查询来隐藏第一个元素不起作用

Question

I have several <hr /> and I use the below css in media queries

hr:first-child {

no luck, why? My scope of media queries is ok, other class work fine but not this one, I wonder.. ??

Answer 1

try this:

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

As the name of the selector suggests, :first-child refers to the first child of the element, and :first-of-type refers to the first element of that type. I believe you are looking for the latter.

Answer 2

To select the first HR You need to use

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

Using the :first-child pseudo selector selects every hr element that is the first child of it's parent.

Using the :first-of-type pseudo selector selects the first hr element of it's parent

Answer 3

Also you can try like the following:

<hr class="hideinsmallscreen" />

Change the class name as you want .hideinsmallscreen

Within media query you can use the class to hide that <hr/>

.hideinsmallscreen{
     display:none;
  }