Wie füge ich CSS nur zu einem Element hinzu?

Question

Ich habe 2 Tasten auf meiner Website, die die gleiche Klasse von .ow-button-base haben. Ich versuche es so zu machen, dass eine dieser Schaltflächen nicht erscheint, wenn die Website auf ein mobiles Gerät geladen wird. Dies ist der Code, den ich jetzt bin mit:

@media screen and (max-device-width: 640px) { 
    .ow-button-base { 
    display: none; 
    } 
} 

Als ich das Gerät mit beiden Tasten nicht angezeigt, wenn die Website auf einem mobilen Gerät geladen wird. Wie mache ich es so, dass nur einer nicht erscheint?

Answer 1

einfach auf eine der Schaltfläche Add-ID (die Sie auf dem mobilen Gerät angezeigt werden sollen), fe my_button2:

@media screen and (max-device-width: 640px) { 
    .ow-button-base { 
    display: none; 
    } 

    #my_button2 { 
    display: block; 
    } 
} 

Und Ihre Tasten:

<button class="ow-button-base" /> 
<button class="ow-button-base" id="my_button2" /> 

Dann wird der zweite Knopf sein Auch für Mobilgeräte angezeigt.

Answer 2

Sie könnten es mit dem :last-of-type Blocker zielen.

@media screen and (max-device-width: 640px) { 
.ow-button-base:last-of-type { 
    display: none; 
} 
} 

Answer 3

Wenn Sie würde sie gerne die gleiche Klasse haben, einen Selektor verwenden, die eine bestimmte Instanz finden:

@media screen and (max-device-width: 640px) { 
    .ow-button-base:nth-of-type(2) { // select the second instance 
    display: none; 
    } 
}