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;
  }
}

寄语

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

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

参考文档

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

Vuejs和其他前端框架的对比

React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式 (Reactive) 和组件化 (Composabl...

457100
来自专栏菩提树下的杨过

Flex4中使用HDividedBox,VDividedBox

flex4中推荐使用spark组件来布局,所以在工具箱里把HDividedBox,VDividedBox这二个非常有用的东东给隐藏掉了,只能手动在source视...

206100
来自专栏向治洪

vue.js与其他前端框架的对比

React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式 (Reactive) 和组件化 (Composabl...

28380
来自专栏星流全栈

相见恨晚的JavaScript包搜索工具 — JS.coach

34820
来自专栏Golang语言社区

【Go 语言社区】算法课程 第一季 第5节 回文检查

回文概念:大致就是把这个数倒过来念数字还是和原来的一样. 运行结果: 代码: package main import ( "fmt" ) //...

33540
来自专栏Jackson0714

JavaScrpit判断横竖屏

14130
来自专栏守候书阁

移动web开发问题和优化小结

到目前为止,互联网行业里,手机越来越智能化,移动端占有的比例越来越高,尤其实在电商,新闻,广告,游戏领域。用户要求越来越高,网站功能越来越好,效果越来越炫酷,这...

16320
来自专栏IMWeb前端团队

Iconfont在教育平台的实践

本文作者:IMWeb bleanycao 原文出处:IMWeb社区 未经同意,禁止转载 Iconfont 体系化解决方案 背景 性能优化是前端开发不得...

22770
来自专栏编程直播室

源码发布:一个Angular写得Markdown编辑器 参考资料

17720
来自专栏杨龙飞前端

网页html结构搭建方法总结

39660

扫码关注云+社区

领取腾讯云代金券