Question

我的网站上有两个按钮，它们具有相同的.ow-button-base类。我尝试做的是使网站在移动设备上加载时不会出现其中一个按钮。这是我现在使用的代码：

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

当我使用此BOTH按钮时，在移动设备上加载网站时不会出现。如何制作，只有一个不出现？

Answer 1

只需添加一个按钮（您想在移动设备上显示）ID，f.e @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" />

你的按钮：

int position = myString.IndexOf(' ');  // to find first space
int lastpos=0;
while (position >= 0)
{
    // Do whatever you want with the position.
    string sub = input.Substring(lastpos, position-1);  // here input is the text you get from input box
    lastpos = position+1;
    // to find next space in sentence
    position = myString.IndexOf(' ', position + 1);
}

然后第二个按钮也会显示在移动设备上。

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;
  }
}

如何只将CSS添加到一个元素中？

3 个答案: