CSS：如何select所有没有某个class的链接（a）？

Question

所以我有一个导航栏，里面有几个 link。如果屏幕宽度太小，所有 link 都会消失并出现一个汉堡菜单图标，它也是一个 link，但它有 class“汉堡”。我如何在 select 或 CSS 中制作一个 select 除了汉堡包菜单 link 之外的所有 link？

这是我的 CSS:

@media only screen and (min-width: 601px) {
    /* hide the hamburger */
    .hamburger {
        display: none;
    }
    /* show all the nav-buttons */
    .navbar a {
        display: block;
    }
}


/* if browser window is small (max-width) */

@media only screen and (max-width: 600px) {
    /* show everything with the hamburger class */
    .hamburger {
        display: block;
    }
    /* hide all the nav-buttons */
    .navbar a {
        display: none;
    }
}

Answer 1

您需要根据 MDN 文档 not() CSS psuedo class

使用伪 class not()

not() 伪 class 需要一个 comma-separated 一个或多个选择器列表作为其参数（即括号内的内容）。

在您想要的所有链接的示例中，除了带 class .hamburger 的链接外，它将是：

a:not(.hamburger)

Answer 2

您可以使用 CSS pseudo-class, specifically the :not() select 或 select 不匹配汉堡包的元素 class。

假设 .hamburger 是另一个 .navbar 的嵌套 class:

.navbar a:not(.hamburger) {
    /* your code */
}

这将 select 所有 <a> 标签，但包含 .hamburger class 的标签除外。

CSS：如何select所有没有某个class的链接（a）？

CSS: How to select all links ( a ) that do not have a certain class?

css