如何將CSS添加到一個元素？

Question

我在我的網站上有兩個按鈕，它們的類別都是.ow-button-base。我想要做的是讓網站在移動設備上加載時不會出現其中一個按鈕。這是我現在使用的代碼：

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

當我使用這個BOTH當網站被裝載在移動設備上的按鈕不會出現。我如何做到這一點只有一個不會出現？

Answer 1

只需添加到按鈕中的一個（你想顯示在移動設備）ID，FE my_button2：

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

    #my_button2 { 
    display: block; 
    } 
} 

而且你的按鈕：

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

然後第二個按鈕會也顯示爲移動設備。

Answer 2

您可以使用:last-of-type阻止程序將其鎖定。

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

Answer 3

如果你希望他們有相同的類中，使用一種選擇器，會發現一個特定實例：

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