删除 CSS 样式表中的类

Question

我正在尝试使我的网站可移动访问。我遇到的问题是nav。我相信这与nav 上使用的类有关。所以我想做的是在使用移动设备时删除该类。

我在媒体查询中使用了它，并更改了许多内容以使其在移动设备上看起来正确。我读到可以使用

删除一个类

$( "p" ).removeClass( "myClass yourClass" );

我相信我会是

$( "nav" ).removeClass( "navigation" );

但是当放入样式表并通过 css 验证器时，我得到了

Lexical error at line 104, column 4.
Encountered: "(" (40), after : "$" ( "nav" ).removeClass( "navigation" );

我不知道如何解决这个问题，或者即使我可以解决这个问题。我读过的其他页面说这是不可能的，所以我得到了相互矛盾的信息。

这是我试图发布代码。 我的 CSS 中的所有内容都会影响我的导航。

nav ul { list-style-type: none;
    margin: 0; 
    padding: 0; }
header nav a { text-decoration: none;
    padding: 10px;
    display: block;
    background-color: #a8e6a8;
    border-bottom: 1px solid #228B22; }
nav a:link { color: #228B22; } 
nav a:visited { color: #568b22; } 
nav a:hover { color: #869DC7; 
    background-color: #EAEAEA; }
.navigation { float: right;
    width: 200px;
    font-weight: bold;
    letter-spacing: 0.1em; }

这是我未完成的媒体查询。

@media only screen and (max-width: 1024px) {
  body { margin: 0; padding: 0; background-color: #fff; }
  #wrapper { width: auto; min-width: 0; margin: 0; }
  h1 { margin: 0; text-align: center; font-size: 2em; line-height: 200%; }
  nav { float: none; width: auto; }
  nav li { display: inline-block; }
  nav a { padding: 1em; border-style: none; font-size: 1.2em; }
  nav ul { text-align: center; padding: 0; margin: 0; }
  main { margin: 0; padding: 0 1em; font-size: 90%; }
  dd { margin-bottom: 1em; }
  footer { margin: 0; }
  .navigation { float: none;
    width: auto;
    letter-spacing: 0.1em; };
}

Answer 1

欢迎加入！请尽量让您的问题更简洁:-)

我的回答： 您发布的代码是 JavaScript。 jQuery，确切地说。这在 CSS 中肯定行不通。

但更好的解决方案是使用媒体查询不是删除一个类，而是改变它。示例：

.foo { width:200px; }
@media print
{
  .foo { width:100px; }
}

将 CSS 添加到问题后进行编辑：

结尾的; 对我来说似乎是一个语法错误：将letter-spacing: 0.1em; }; 更改为letter-spacing: 0.1em; }

除了媒体查询在原则上看起来不错。尝试添加background:red 看看它是否有效:-)

Answer 2

$("nav").removeClass("navigation"); 是 JavaScript，而不是 CSS。从概念上讲，您不能在 CSS 中添加/删除类 - 它只是一种样式描述语言。

然而，您可以在 CSS 中为特定设备宽度显示/隐藏内容（“断点”）：

.navigation {
  display: block;
  /* your style definitions for nav */
}

@media only screen and (max-device-width: 800px) {
  .navigation {
    display: none;
  }
}

Answer 3

实际上，您可以使用jQuery 添加一个类，但我认为这不是实现您需要的最佳方式。

我见过很多设计师做的是有两个导航。一个用于大屏幕，另一个用于小屏幕。它非常方便，因为您也可以使用不同的 html 代码。例如，您可以将 FontAwesome 图标添加到您的移动导航中，添加或删除链接等。因此，您的 html 将如下所示：

<nav class="nav-big">
  <ul>
    <li><a href="path">Link 1</a></li>
    <li><a href="path">Link 2</a></li>
    ...
  </ul>
</nav>

<nav class="nav-small">
  <ul>
    <li><i class="fa fa-plus"></i><a href="path">Link 1</a></li>
    <li><i class="fa fa-minus"></i><a href="path">Link 2</a></li>
    ...
  </ul>
</nav>

然后，您的 CSS 将如下所示：

.nav-big {
...your styles 
}

.nav-small {
  ...your styles
}

@media screen and (min-width: 1024px) {
    .nav-small {
      display: none;
    }
}

@media screen and (max-width: 1023px) {
    .nav-big {
        display: none;
    }
}

您可以在我的 Blog 和我开发的另一个 website 中看到类似的东西。

希望有所帮助。如果我这样做了，请将答案标记为有用或正确！谢谢！