前言

css3中增加了not选择器，可以用于排除不符合某些规则的元素，下面我从语法，兼容性，可能的实践三个角度更好的学习使用它。

语法

：not(cssRules)

兼容性

not选择器 - 图1

实践

筛选出不符合原则的元素

这种应该属于最基本的用法，不再过多描述。

突出当前状态元素

在业务场景中经常会用到hover，对于hover元素你可能有设置特殊样式，但是未设置hover的元素如果也想要一个区别样式该如何操作呢？你之前的做法可能是给其他非hover的元素在增加一个特殊样式，然后用js去给它加上吧？我之前也是这样做的。

  1. .head_nav2{
  2.   li.trans{
  3.     opacity:0.5;
  4.   }
  5.   li:hover,li.active{
  6.     cursor:pointer;
  7.     background:blue;
  8.   }
  9.  }

在本文的案例中，我们需要实现的是li hover的时候其他元素变半透明。实现逻辑也很简单，在父元素hover的前提下筛选出没有hover的子元素。

  1. .head_nav2{
  2.    &:hover li:not(:hover){
  3.     opacity:0.5;
  4.   }
  5.   li:hover{
  6.     cursor:pointer;
  7.     background:blue;
  8.   }
  9.  }

not选择器 - 图2

移除某些激活状态

觉得还不过瘾？本文再提供另外一个案例，同样是hover状态下，我们需要移除其他元素的激活样式。业务场景就是导航条中，默认选中的可能是.active的首页，当我们hover的时候希望hover元素具有激活样式active，其他元素不具有。同样用not实现哦(实现的关键就是为其添加与激活样式相反的样式，而不是移除其激活样式)。

  1. .head_nav3{
  2.    &:hover li:not(:hover){
  3.     opacity:0.5;
  4.     background:none;
  5.   }
  6. }

寄语

大家觉得可还好？其实语法是很简单的，使用也是很简单的，关键是思考其需要实现的准确场景，灵活的巧用。
热烈欢迎大家与我一起讨论学习前端知识妙用，我的口头禅：我们从小白到大师，慢慢来。

参考文档