删除 CSS 样式表中的 class

Question

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

我在媒体查询中找到了它，并进行了一些更改以使其在移动设备上看起来正确。我读到可以使用

删除 class

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

我相信我的会是

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

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

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

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

这是我尝试 post 的代码。这一切都在我 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.

中肯定行不通

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

.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 中 add/remove 一个 class - 它只是一种 风格的描述语言 .

但是，您可以在CSS中做的是针对特定设备宽度的show/hide内容（"breakpoint"):

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

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

Answer 3

实际上，您可以添加 class 和 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 and also in another website 中看到类似的东西。

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

删除 CSS 样式表中的 class

Removing a class in a CSS stylesheet

html

css

class

stylesheet

media-queries