1. 使用 :not() 为导航添加/取消边框

传统的方法为导航栏添加边框:

/* add border */
.nav li {
      border-right: 1px solid #666;
}

/* remove border */
.nav li:last-child {
      border-right: none;
}

用css的:not()实现:

.nav li:not(:last-child) {
      border-right: 1px solid #666;
}

减少了很多代码实现了相同的功能。

2. 垂直居中(任何元素)

html, body {
      height: 100%;
      margin: 0;
}

/*要设置垂直居中的元素*/
element {
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      display: -webkit-flex;
      display: flex;
}

3. 使用负的 nth-child 选取元素

使用负的 nth-child 在 1 到 n 之间选择元素:

li {
  display: none;
}
/* 使用负的 nth-child 在 1 到 n 之间的元素,选择第1到3个元素就是nth-child(-n+3) */
li:nth-child(-n+3) {
      display: block;
}使用 :not()来做:
li:not(:nth-child(-n+3)) {
    display: none;
}
 

4. 使用 Flexbox 来避免 Margin Hacks

在做多列布局的时候,可以通过 Flexbox 的 space-between 属性来避免nth-first-、 last-child 等 hacks:

.list {
      display: flex;
      justify-content: space-between;
}

.list .person {
      flex-basis: 23%;
}

这样,列之间的空白就会被均匀的填满。

css技巧收集的更多相关文章

  1. 最常用的CSS技巧收集笔记

    1.重置浏览器的字体大小  重置浏览器的默认值 ,然后重设浏览器的字体大小你可以使用雅虎的用户界面重置的CSS方案 ,如果你不想下载9MB的文件,代码如下: body,div,dl,dt,dd,ul, ...

  2. CSS技巧收集——巧用滤镜

    最近暴雪一款叫<守望先锋>的游戏火到不行,身边很多人都深受其毒害,虽然博主自己没有买(穷),但是耳濡目染也了解了个大概. 由于之前大致学习了一下 css 滤镜的各种用法,所以心血来潮结合二 ...

  3. CSS技巧收集——毛玻璃效果

    先上 demo和 源码 其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性.但是要做一个好的毛玻璃效果,需要注意很多细节. 比如我们需要将上图中页面中间的 ...

  4. 50个CSS技巧

    这里我工作中收集了10个很不错的CSS技巧,你可以用在你的项目上.它可以帮你很好地整理你的元素并让他们看起来蛮酷的.下面开始我们的内容,希望你会喜欢它.下面是我收集的CSS技巧,希望能帮助到你,感觉收 ...

  5. 最全的CSS浏览器兼容问题【CSS技巧 】

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...

  6. (转) 50个CSS技巧

    这里我工作中收集了10个很不错的CSS技巧,你可以用在你的项目上.它可以帮你很好地整理你的元素并让他们看起来蛮酷的.下面开始我们的内容,希望你会喜欢它.下面是我收集的CSS技巧,希望能帮助到你,感觉收 ...

  7. 学无止境的CSS(xHTML+CSS技巧教程资源大全)

    本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...

  8. DelphiXE2 DataSnap开发技巧收集

    DelphiXE2 DataSnap开发技巧收集 作者:  2012-08-07 09:12:52     分类:Delphi     标签: 作为DelphiXE2 DataSnap开发的私家锦囊, ...

  9. CSS技巧-rgba函数的妙用

    先简单介绍一下: rgba()函数是平时开发中经常遇到的,这篇文章也做了一个比较详细的解读以及一系列的应用. 对它的工作原理做一番分析:就是具有一定透明度的盒子: 还比较了rgba()函数和不透明度属 ...

随机推荐

  1. MySQL 5.6查询优化器新特性的“BUG” eq_range_index_dive_limit

    本文转自 http://www.imysql.cn 最近碰到一个慢SQL问题,解决过程有点小曲折,和大家分享下. SQL本身不复杂,表结构.索引也比较简单,不过个别字段存在于多个索引中. CREATE ...

  2. EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(八)

    前言 本篇幅将对系统的菜单管理模块进行说明,系统的菜单采用树形结构,这样可以更好地方便层级设计和查看.本示例将说明如何通过EntityFramework读取递归的菜单树形结构,以及结合EasyUI的t ...

  3. EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(三)

    前言 在上一篇中,我们依靠着EasyUI强大的前端布局特性把前端登录界面和主界面给搭建完成了.这一篇我们就要尝试着把整个解决方案部署到云端呢,也就是Visual Studio Online(TFVC) ...

  4. IOS常用框架

    IOS开发中有用的第三方库 #Objective-C中最受瞩目库 [链接](https://github.com/languages​​/Objective-C/most_watched) * [th ...

  5. 苹果公布WWDC2016时间 并做了个程序员情怀网页

    新浪手机讯 4月19日上午消息,苹果公司今日正式确定2016年全球开发者大会(WWDC)开幕时间:6月13-17日,并做了个非常有意思的代码风格页面. 网友戏称这个页面只有程序员们才能看懂,它的首页是 ...

  6. μC/OS-Ⅲ系统中的任务就续表

    μC/OS-Ⅲ支持任意数目的不同优先级.一般情况下64级优先级就足够了. 在μC/OS-Ⅲ中所有已经就绪等待运 行的任务都被放入一个我为的“就续表”(ready list)中.就续表包括两部分:一个就 ...

  7. 发布自己的pods到CocoaPods trunk 及问题记录

    这两天准备把之前写的一些小玩意添加到pods库中去,参考了一些资料后进行操作,实际中也遇到了一些问题,记录下来,问题及解决方式在后面. 参考内容转载如下: 首先更新了用trunk之后,CocoaPod ...

  8. walk around by The provided App differs from another App with the same version and product ID 分类: Sharepoint 2015-07-05 08:14 4人阅读 评论(0) 收藏

    'm currently developing a SharePoint 2013 application. After a few deployments via Visual Studio, I ...

  9. CSS字体属性大全

    文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...

  10. STM32——CAN通讯实现

    CAN通讯的实现步骤: 1.CAN初始化,其中包括:a.配置CAN时钟,配置IO: b.使能CAN中断向量: c.CAN硬件寄存器配置初始化: d.过滤器初始化: e.打开CAN中断. 2.CAN发送 ...