CSS实用技巧干货

栏目: CSS · 发布时间: 5年前

内容简介:我们通常的做法是先给每个菜单项设置边框,然后在设置最后一个菜单的边框为零不过不要这么做,使用 :not() 伪类来达到同样的效果:

一、使用 :not() 在菜单上应用/取消应用边框

CSS实用技巧干货

我们通常的做法是先给每个菜单项设置边框,然后在设置最后一个菜单的边框为零

/* 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;

注:未完待续,发现新的技巧会持续更新,如有更好的技巧,欢迎留言讨论


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

算法霸权

算法霸权

[美] 凯西·奥尼尔 / 马青玲 / 中信出版集团 / 2018-9-1 / 69.00元

数据科学家凯西•奥尼尔认为,我们应该警惕不断渗透和深入我们生活的数学模型——它们的存在,很有可能威胁到我们的社会结构。 我们生活在一个依赖“算法”的时代,它对我们生活的影响越来越大,我们去哪里上学,我是不是应该贷款买车,我们应该花多少钱来买健康保险,这些都不是由人来决定的,而是由大数据模型来决定的。从理论上来说,这一模型应该让社会更加公平,每一个人的衡量标准都是一样的,偏见是不存在的。 ......一起来看看 《算法霸权》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具