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;

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


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

查看所有标签

猜你喜欢:

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

这就是OKR

这就是OKR

【美】约翰·杜尔(John Doerr) / 曹仰锋、王永贵 / 中信出版社 / 2018-12 / 68.00元

这本书是传奇风险投资人约翰·杜尔的作品,揭示了OKR这一目标设定系统如何促使英特尔、谷歌等科技巨头实现爆炸性增长,以及怎样促进所有组织的蓬勃发展。 20世纪70年代,在英特尔担任工程师时,杜尔首次接触到OKR。之后,作为一个风险投资人,杜尔不遗余力地将这一管理智慧,分享给50多家公司和机构,包括谷歌、亚马逊、领英、脸书、比尔及梅琳达·盖茨基金会,甚至摇滚歌手波诺的公益项目。在杜尔的帮助下,任......一起来看看 《这就是OKR》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

SHA 加密
SHA 加密

SHA 加密工具