如何将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; 
    } 
}