内容简介:我们通常的做法是先给每个菜单项设置边框,然后在设置最后一个菜单的边框为零不过不要这么做,使用 :not() 伪类来达到同样的效果:
一、使用 :not() 在菜单上应用/取消应用边框
我们通常的做法是先给每个菜单项设置边框,然后在设置最后一个菜单的边框为零
/* add border */ .nav li { border-right: 1px solid #666; } //* remove border */ .nav li:last-child { border-right: none; }
不过不要这么做,使用 :not() 伪类来达到同样的效果:
.nav li:not(:last-child) { border-right: 1px solid #666; }
当然,你也可以使用 .nav li + li 或者 .nav li:first-child ~ li ,但是 :not() 更加清晰,具有可读性
.nav li + li{ border-right:1px solid #666;} /*.nav li:first-child ~ li{ border-left:1px solid #fff; }*/
二、使用:nth-child(n)选择项目
(注:第一个子元素的下标是 1)
:nth-child(3) 表示选择列表中的第三个元素
:nth-child(2n)表示列表中的偶数标签,即选择第2、第4、第6……标签
:nth-child(2n-1) 表示选择列表中的奇数标签,即选择 第1、第3、第5、第7……标签
:nth-child(n+3) 表示选择列表中的标签从第3个开始到最后(>=3)
:nth-child(-n+3) 表示选择列表中的标签从0到3,即小于3的标签(<=3)
:nth-last-child(3) 表示选择列表中的倒数第3个标签
:nth-of-type(n) 匹配属于父元素的特定类型的第 N 个子元素的每个元素
三、隐藏没有静音、自动播放的影片
video[autoplay]:not(:muted){ display:none; }
再次,利用了 :not()
的优点
四、固定表格table-layout:fixed;
注:未完待续,发现新的技巧会持续更新,如有更好的技巧,欢迎留言讨论
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- CSS实用技巧
- Python实用技巧,你不知道的7个好玩的Python技巧
- Kubernetes 实用技巧: 使用 ksniff 抓包
- 你可能不知道的 npm 实用技巧
- 高性能网站实用技巧之消息队列篇
- Python 基础起步 (六) List的实用技巧大全
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。