css :not_研究：CSS3否定（：NOT）选择器

CSS有一些选择器，允许您在某些条件下选择元素，例如:hover ， :focus和:active等。但是今天我们将不介绍这些选择器。 我们将研究一种仍然鲜为人知但仍被大多数Web设计人员使用的方法，即:not选择器或也称为否定选择器。

它有什么作用？

我确信:not名称本身已经描述了它的功能，它只会选择与指定元素或条件相反的东西 。 例如：

该语法将选择除p （段落）以外的任何元素。

:not(p)

虽然下面的示例语法将选择不具有abc类的div元素

div:not(.abc)

好吧，现在，让我们在一个真实的例子中尝试这个选择器：

首先，让我们用Wikipedia的一些链接以及虚构的领域的一些链接来制作几段。 这是该段HTML标记。

<article>
    <h1>The CSS :not Selector Demo</h1>
    <p>Jujubes applicake sesame snaps chupa chups <a href="http://www.thisisnotwikipedia.com/">chocolate cake</a>. Oat cake marshmallow wypas toffee donut cake. Chupa chups jelly cupcake gummi bears. Lemon drops cake wafer.</p>
    <p><a href="http://en.wikipedia.org/wiki/Cheesecake">Cheesecake chocolate cake donut</a> jelly sweet roll powder souffl�?�?�?© chocolate cake. Wypas cotton candy lemon drops cookie candy donut bonbon marzipan. Macaroon candy liquorice jelly-o. Chocolate pie sweet roll candy <a href="http://en.wikipedia.org/wiki/Marshmallow">marshmallow</a> drag�?�?�?©e cotton candy brownie marshmallow.</p>
    <p>Pudding topping marshmallow bear claw. Pie muffin pastry gummies <a href="http://www.exampledomain.com">fruitcake brownie</a> jelly gingerbread sesame snaps. Candy pudding cupcake bear claw. Carrot cake muffin cotton candy tootsie roll muffin. Jelly beans tart drag�?�?�?©e sweet icing <a href="http://en.wikipedia.org/wiki/Chocolate_bar">wafer topping chocolate bar</a>. Sweet roll toffee sugar plum pastry drag�?�?�?©e <a href="http://www.somename.co/">bonbon candy muffin</a>.</p>
    <p><a href="http://en.wikipedia.org/wiki/Pastry">Cake marzipan applicake pastry</a> wypas fruitcake. Oat cake chocolate wypas drag�?�?�?©e sugar plum carrot cake icing. Caramels chocolate bar croissant wafer cupcake pie jujubes chocolate bar. Biscuit candy canes drag�?�?�?©e.Candy brownie oat cake sesame snaps cheesecake powder tootsie roll biscuit bear claw. Souffl�?�?�?© gummi bears jelly beans sesame snaps faworki <a href="http://en.wikipedia.org/wiki/Dessert">cookie dessert sweet bonbon</a>.</p>
</article>

这里的计划是：我们将只选择不指向Wikipedia的链接，然后为这些链接加上感叹号，以提醒人们注意这些链接。

首先，我们将在所有链接上添加:after伪元素以放置标记，并将其定义为inline-block元素。

a:after {
          display: inline-block; 
      }

然后，要选择每个不指向Wikipedia的链接，我们将:not选择器与属性选择器组合在一起。 这里的属性选择器将选择href属性以http://en.wikipedia.org/开头的每个锚标记，并将其与:not组合在一起，显然它将选择相反的标记。 所以我们开始：

a:not([href^="http://en.wikipedia.org/"]):after {
     background-color: #F8EEBD;
     border: 1px solid #EEC56D;
     border-radius: 3px 3px 3px 3px;
     color: #B0811E;
     content: "!";
     font-size: 10pt;
     margin-left: 5px;
     padding: 1px 6px;
     position: relative;
  }

有用！ 现在，不指向Wikipedia的锚标记具有感叹号。

Chrome Bug

如果您在Chrome浏览器中查看此图片，则会注意到渲染的效果与上述不同。 不论网址如何，所有链接似乎都带有感叹号。

这种情况实际上已作为一个错误解决 。 因此，要修复此错误，我们需要添加此规则。

a[href^="http://en.wikipedia.org/"] /*Chrome Hack*/ {
        display: inline-block; 
   }

现在问题应该已经解决了。

• 演示版

结论

在某些情况下，使用:not选择器实际上是最有效的选项，就像上面的示例一样，在该示例中，我们甚至可以在不添加不必要的类或其他标记的情况下选择一些随机元素。

实际上，您可以利用此选择器进一步构建出色的效果，这是一个示例： CSS3的过滤器功能

翻译自: https://www.hongkiat.com/blog/a-look-into-css3-negation-not-selector/