可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm learning css and I came across an example that has the following code:

<body>
   <a href="#" class="CardLink CardLink_Hearts">Hearts</a>
   <a href="#" class="CardLink CardLink_Clubs">Clubs</a>
   <a href="#" class="CardLink CardLink_Spades">Spades</a>
   <a href="#" class="CardLink CardLink_Diamonds">Diamonds</a>
</body>

and css:

.CardLink {
    display: block;
    color: #666;
    text-shadow: 0 2px 0 #efefef;
    text-decoration: none;
    height: 2.75rem;
    line-height: 2.75rem;
    border-bottom: 1px solid #bbb;
    position: relative;
}

@media (min-width: 300px) {
    .CardLink {
        padding-left: 1.8rem;
        font-size: 1.6rem;
    }

    .CardLink:before {
        display: block;
    }
}

.CardLink:before {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

.CardLink_Hearts:before {
    content: "❤";
}

.CardLink_Clubs:before {
    content: "♣";
}

.CardLink_Spades:before {
    content: "♠";
}

.CardLink_Diamonds:before {
    content: "♦";
}

/*@media (min-width: 300px) {
    .CardLink:before {
        display: block;
    }
}*/

The idea is when the viewport size is below 300px then the card icons are not displayed, otherwise, it shows them.

I was playing around with the code and I can't understand why we have to define @media (min-width: 300px) twice for the code to work as expected.

Why can't we just put the code in the last paragraph of the css to the section where media screen size belongs (good code reuse instead of declaring this again ) ?

If I do this then no icons are displayed (this is the code below).

Could anyone explain ? Check the plunker, this works as expected: https://plnkr.co/edit/MJAPdkgUegpUlJnkcQHg?p=preview

回答1:

Because you're working with Cascading Style Sheets.

A cascade is like a waterfall: The rendering engine starts at the top of the source document and works its way down.

In this case, it sees your media query. Then it sees the rest of your code, which takes precedence because it comes later.

For instance, let's say your stylesheet had this:

div { color: red; }

div { color: blue; }

div { color: red; }

Your text color will be red.

In this case:

div { color: red; }

div { color: blue; }

Your text color will be blue.

In both cases, CSS picks the last declaration in the stylesheet.

If you want your media query to take precedence, put it at the end of your code.

(It seems simple and often it is. Just make sure to learn about CSS specificity.)

回答2:

It's about the placement, put the media query after the :before's and it will be ok

.CardLink {
  display: block;
  color: #666;
  text-shadow: 0 2px 0 #efefef;
  text-decoration: none;
  height: 2.75rem;
  line-height: 2.75rem;
  border-bottom: 1px solid #bbb;
  position: relative;
}
.CardLink:before {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
.CardLink_Hearts:before {
  content: "❤";
}
.CardLink_Clubs:before {
  content: "♣";
}
.CardLink_Spades:before {
  content: "♠";
}
.CardLink_Diamonds:before {
  content: "♦";
}
@media (min-width: 300px) {
  .CardLink {
    padding-left: 1.8rem;
    font-size: 1.6rem;
  }
  .CardLink:before {
    display: block;
  }
}

<a href="#" class="CardLink CardLink_Hearts">Hearts</a>
<a href="#" class="CardLink CardLink_Clubs">Clubs</a>
<a href="#" class="CardLink CardLink_Spades">Spades</a>
<a href="#" class="CardLink CardLink_Diamonds">Diamonds</a>