资讯专栏INFORMATION COLUMN

CSS实用技巧干货

tommego / 1876人阅读

摘要:一使用在菜单上应用取消应用边框我们通常的做法是先给每个菜单项设置边框,然后在设置最后一个菜单的边框为零不过不要这么做,使用伪类来达到同样的效果当然,你也可以使用或者,但是更加清晰,具有可读性二使用选择项目注第一个子元素的

一、使用 :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-left: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)< /strong>

:nth-last-child(3) 表示选择列表中的倒数第3个标签

:nth-of-type(n) 匹配属于父元素的特定类型的第 N 个子元素的每个元素

三、隐藏没有静音、自动播放的影片 =

再次,利用了:not()的优点

四、IE 条件注释

IE 中的条件注释对 IE 的版本和 IE 非 IE 有优秀的区分能力,是 Web 开发中常用的hack方法,能对 IE 系列产品进行多带带的 HTML 代码处理

gt : greater than,选择条件版本以上版本,不包含条件版本

lt : less than,选择条件版本以下版本,不包含条件版本

gte : greater than or equal,选择条件版本以上版本,包含条件版本

lte : less than or equal,选择条件版本以下版本,包含条件版本

! : 选择条件版本以外所有版本,无论高低

五、固定表格table-layout:fixed;

通常搭配word-wrap:break-word;和word-break:break-all;使用

CSS3 word-wrap 属性

word-wrap: normal|break-word;

CSS3 word-break 属性

word-break: normal|break-all|keep-all;

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/117440.html

相关文章

  • CSS实用技巧干货

    摘要:一使用在菜单上应用取消应用边框我们通常的做法是先给每个菜单项设置边框,然后在设置最后一个菜单的边框为零不过不要这么做,使用伪类来达到同样的效果当然,你也可以使用或者,但是更加清晰,具有可读性二使用选择项目注第一个子元素的 一、使用 :not() 在菜单上应用/取消应用边框 showImg(https://segmentfault.com/img/bVbo3hC?w=1093&h=43)...

    lufficc 评论0 收藏0
  • css相关 - 收藏集 - 掘金

    摘要:在正式前端一些小细节前端掘金英文原文,翻译未来的太让人兴奋了一方面,是全新的页面布局方式另一方面,是酷炫的滤镜颜色等视觉效果。老司机教你更好的进行编程个技巧前端掘金并不总是容易处理。 CSS3 实现文字流光渐变动画 - 前端 - 掘金来自百度前端技术学院的实践任务:有趣的鼠标悬浮模糊效果,参考:http://ife.baidu.com/course/d...,用CSS3实现了一下,顺便...

    molyzzx 评论0 收藏0
  • 个人分享--web前端学习资源分享

    摘要:前言月份开始出没社区,现在差不多月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了一般来说,差不多到了转正的时候,会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客,博文推荐分享给大家。 1.前言 6月份开始出没社区,现在差不多9月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了!一般来说,差不多到了转正的时候,会进行总结或者分享会议!那么今天我就...

    sherlock221 评论0 收藏0
  • 优秀文章收藏(慢慢消化)持续更新~

    摘要:整理收藏一些优秀的文章及大佬博客留着慢慢学习原文协作规范中文技术文档协作规范阮一峰编程风格凹凸实验室前端代码规范风格指南这一次,彻底弄懂执行机制一次弄懂彻底解决此类面试问题浏览器与的事件循环有何区别笔试题事件循环机制异步编程理解的异步 better-learning 整理收藏一些优秀的文章及大佬博客留着慢慢学习 原文:https://www.ahwgs.cn/youxiuwenzhan...

    JeOam 评论0 收藏0

发表评论

0条评论

tommego

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<