css3-not选择器妙用

前言

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

语法

：not(cssRules)

兼容性

兼容性

实践

筛选出不符合原则的元素

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

突出当前状态元素

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

.head_nav2{
  li.trans{
    opacity:0.5;
  }
  li:hover,li.active{
    cursor:pointer;
    background:blue;
  }
 }

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

.head_nav2{
   &:hover li:not(:hover){
    opacity:0.5;
  }
  li:hover{
    cursor:pointer;
    background:blue;
  }
 }

效果图

移除某些激活状态

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

.head_nav3{
   &:hover li:not(:hover){
    opacity:0.5;
    background:none;
  }
}

寄语

大家觉得可还好？其实语法是很简单的，使用也是很简单的，关键是思考其需要实现的准确场景，灵活的巧用。

热烈欢迎大家与我一起讨论学习前端知识妙用，我的口头禅：我们从小白到大师，慢慢来。

参考文档

• w3c selector :not
• 菜鸟教程 css3 not
• codepen案例：css3-not