为什么我的媒体没有在屏幕宽度上触发（它被触发但不会覆盖 CSS）？

Question

This is CSS code and my class is ok but for some reason when I go to the chrome dev tools I can see that media gets "triggered" on 600px but it doesn't override my CSS. Anyone knows why?

.main__text{
    color:red;
    font-size: 2rem;
    margin: 1rem 0 2rem 0;
}

@media (min-width: 600px) {
    p{
        font-size: 1rem;
    }
}

Answer 1

Class selectors take priority over tag selectors (re: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity , https://www.w3schools.com/css/css_specificity.asp ).

Add a class to the p you'd like to change and target that.

 .main__text { color: red; font-size: 2rem; margin: 1rem 0 2rem 0; } @media (min-width: 600px) {.main__text__alt { font-size: 1rem; color: blue; } }

 <p class="main__text">Some Text</p> <p class="main__text main__text__alt">Some Text that will change color and size at 600px</p>

Answer 2

try this.

@media (min-width: 600px) {
    p{
        font-size: 1rem !important;
    }
}

Answer 3

For the @media to work you need to specify something like screen like this:

@media only screen and (min-width: 600px) {
 p {
  font-size: 1rem;
 }
}

Answer 4

I'm not sure about your html but change the 'p' selector to '.main__text'.

try this:

 .main__text { color: red; font-size: 2rem; margin: 1rem 0 2rem 0; } @media only screen and (min-width: 600px) {.main__text { font-size: 1rem; } }

An easier way to understand media queries would be trying this:

 .box { display: block; background: red; height: 100px; width: 100px; } @media only screen and (min-width: 600px) {.box { width: 200px; } }

 <section> <div class="box"></div> </section>

Also keep in mind that 'min-width' and 'max-width' act oppositely... 'min-width' applies those styles when the screen size becomes larger than the specified unit while 'max-width' applies the style when the screen size smaller than the specified unit.