伪类:not() 的用途是啥？ [复制]

Posted 2023-03-06

【中文标题】伪类:not() 的用途是啥？ [复制]

【英文标题】：What is the usage of the pseudo class :not()? [duplicate]伪类:not() 的用途是什么？ [复制]

【发布时间】：2020-06-09 22:06:54

【问题描述】：

我看到这个伪类:not()被用在一个Youtube视频页面的源代码中，在MDN中搜索我看到this article在解释这个伪类，但我不明白为什么（以及在这种情况下）有人会使用它。

【问题讨论】：

想象一下你有数百个不同的选择器，比如说类。想象一下，您想选择除一个之外的每个 div 类。你可以使用.foo, .bar, .baz .foobar .foobaz etc...，使用大量列表，或者你可以直接使用div:not(.foo) 。

【参考方案1】：

:not() 用于 css 中的异常。例如，当您想在所有 div 标签中应用某些样式时，除了一个具有特定类的 div 之外，您使用 not:() 喜欢下面的代码！

div:not(.className)
  color:red;

【参考方案2】：

如果您有许多相同的class 或item，并且您不希望某个特定的item 受到影响。会是这样的。

如果你的html是这样的

.contant-wrapper div:not(.new-heading)
  background-color: black;
  color: white;
  margin-bottom: 15px;
  padding: 10px;

<div class="contant-wrapper">
  <div class="heading">bla bla bla</div>
  <div class="title">bla bla bla</div>
  <div class="card">bla bla bla</div>
  <div class="new-heading">bla bla bla</div>
</div>

列表项元素

ul li:not(:last-child)
  margin-bottom: 10px;

ul li:not(:first-child)
  border-top: 1px solid black;

<ul>
  <li>bla bla bla</li>
  <li>bla bla bla</li>
  <li>bla bla bla</li>
  <li>bla bla bla</li>
  <li>bla bla bla</li>
</ul>