Warum wird die Breite in meiner Medienabfrage nicht wirksam?

Question

Ich habe dieses Problem nie zuvor kennengelernt, aber aus irgendeinem Grund kann ich die Breite in meiner Medienabfrage nicht ändern. In den Entwicklertools wird die Breite als durchgestrichen dargestellt, so wie ich sie nicht angezeigt habe, aber das ist nicht der Fall, sie tut dies standardmäßig.

Ich bin einfach versuchen, diese zu ändern:

div.wrapper{ 
    display:block; 
    width:100%; 
} 

in diese:

.wrapper { 
    width: 95%; 
    margin: 0 2.5%; 
} 

ich sogar versucht haben, meine Medienabfrage wrapper Klasse div.wrapper Ändern ... aber es hat nicht geholfen,

Was würde das verursachen?

Answer 1

in CSS, wenn wir ein Element wie attribute.classname (div.wrapper) nennen wird es mehr Priorität als Aufruf von .classname (.wrapper).

Jetzt haben Sie zwei Möglichkeiten, dies zu lösen.

1. Ändern Sie die Aufrufmethode (verwenden Sie die gleiche Aufrufmethode in main-css und media-query).

2. Geben Sie eine zusätzliche Eigenschaft '! Wichtig' nach der Breite in .wrapper.

   .wrapper { Breite: 95%! Wichtig; Marge: 0 2,5%; }

Answer 2

In Ihrer Medienabfrage, verwenden die gleiche Definition als bisher:

div.wrapper { 
    width: 95%; 
} 

Answer 3

Ich denke, Sie diesen Artikel lesen sollte: CSS: Understanding the selector's priority/specificity

Es Priorität ist, wenn Sie CSS-Regeln verwenden.

Zum Beispiel .column .sponsors auf Priorität haben nur .sponsors

Answer 4

Mit Bezug auf Ihre .Column .sponsors Problem, sollten Sie das gleiche tun:

@media screen and (max-width: 640px) 
{ 
    .column .sponsors { 
     width: 90%; 
    } 
} 

Dies wird die .Column Erklärung nicht ändern.