html - 使用 :not(selector) 选择除少数元素之外的所有元素

标签 html css css-selectors

<分区>

我正在尝试选择除前 3 个之外的所有“类”类。我不确定为什么我的语法不正确。有人可以解释我在这里做错了什么吗?

我尝试了一些不同的组合,比如在第 n 个类型之前在选择器中包含类名,以及其他组合。

.classes {
  background: red;
  width: 200px;
  height: 30px;
  margin-bottom: 5px;
}

.classes:not(.classes:nth-of-type(1)), .classes:not(nth-of-type(2)), .classes:not (nth-of-type(3)) {
  background: blue;
}

.classes:nth-of-type(6) {
  background: orange;
}
<div class='classes'>test</div>
<div class='classes'>test</div>
<div class='classes'>test</div>
<div class='classes'>test</div>
<div class='classes'>test</div>
<div class='classes'>test</div>
<div class='classes'>test</div>

最佳答案

你可以使用这个:

.classes {
    background: green;   
}
.classes:nth-child(n+4) {
    background: red;
}

您可以找到更有用的 :nth-child 示例 here

如果你想完全使用 :not 选择器,你可以试试这个:

.classes:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) {
  background: yellow;
}

关于html - 使用 :not(selector) 选择除少数元素之外的所有元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50249367/

上一篇:javascript - 没有指定宽度的表格的 CSS 固定标题

下一篇:html - 如何重新设计两个按钮

相关文章:

javascript - OnClick 函数不适用于 HTML 按钮

javascript - 如何限制我的 React 组件的大小并添加滚动?

css - 如何在 Windows 操作系统上为 Firefox 指定单独的样式

css-selectors - 了解第 n 个选择器

html - 是否可以模拟旧版本的 Firefox

javascript - 奇怪的延迟错误事情

html - 悬停时切换文本会将文本推到一边而不是消失

javascript - 元素javascript的读取宽度

css - Zebra 使用 CSS 将每两个 TR 条纹化一次。

javascript - 每两行更改表格行颜色