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. Unique Paths II

    这题在Unique Paths的基础上增加了一些obstacle的位置,应该说增加的难度不大,但是写的时候对细节的要求多了很多,比如,第一列的初始化会受到之前行的第一列的结果的制约.另外对第一行的初始 ...

  2. IE6兼容问题并解决总结

    1.使用声明你必须经常在html网页头部放置一个声明,推荐使用严格的标准.例如<!DOCTYPEHTMLPUBLIC“-//W3C//DTDHTML4.01//EN”   "http: ...

  3. MyBatis3学习--来源自用户指南

    MyBatis是什么? MyBatis 是一款一流的支持自定义SQL.存储过程和高级映射的持久化框架. MyBatis几乎消 除了所有的JDBC 代码,也基本不需要手工去设置参数和获取检索结果. My ...

  4. Themida和Winlicense加壳软件脱壳教程

    (一)Themida和不用license的Winlicense加壳软件就不说了,直接上脚本脱壳. (二)先看看不同版本OEP的一些小特征: Temida2.1.X.X版本之后的OEP特征(2.0.8. ...

  5. oracle中dual的使用

    dual是一个虚拟表,用来构成select的语法规则,oracle保证dual里面永远只有一条记录.我们可以用它来做很多事情,如下:1.查看当前用户,可以在 SQL Plus中执行下面语句select ...

  6. android工程中menu的使用总结

    android的Menu使用 转自:thinkYeah的博客 1.普通的Menu 先来看看最简单的Menu怎样实现. 在主Activity中覆盖onCreateOptionsMenu(Menu men ...

  7. DataTable 删除列 调整列顺序 修改列标题名称

    DataTable dt = new DataTable(); //删除列 dt.Columns.Remove("Sex"); dt.Columns.Remove("Ag ...

  8. iOS 7.1耗电严重解决办法

    自从iOS 7.1正式版发布以来,三天后的升级率就已经达到17.9%,预计一周后升级率能突破40%.但是也有不少用户在苹果官方支持论坛上抱怨iOS 7.1系统耗电严重. 名为PJS2006的iPhon ...

  9. B2C电子商务基础系统架构解析(转载)

    系统的开发与演化,前台严格follow消费者的购买流程,后台则盯牢订单流转,牢牢抓住这两条主线,才能高屋建瓴的看清B2C的逻辑链和数据流,更深刻的规划功能模块,从而更有效支撑实际业务的流转. 前台 前 ...

  10. Fiddler-3 配置Fiddler监听iphone的http/https请求

    电脑端可以通过Fiddler监听手机端的http请求.需要两个步骤:首先配置Fiddler,再配置手机端. 1 配置 Fiddler 允许远程设备连接: 菜单Tools - Telerik Fiddl ...