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. C# 利用占位符替换word中的字符串和添加图片

    利用占位符替换word中的字符串和添加图片   ///<summary>         /// 替换word模板文件内容,包括表格中内容         /// 调用如下:WordStr ...

  2. 荣品四核4412开发板的USB摄像头问题

    RP4412开发板是荣品电子研发的一款三星四核Exynos4412评估板开发板,支持WIFI+LAN上网.蓝牙4.0.4G上网.500万自动对焦摄像头.GPS.网卡.音频,1080P HDMI音视频同 ...

  3. asp.net MVC之 自定义过滤器(Filter) - shuaixf

    一.系统过滤器使用说明 1.OutputCache过滤器 OutputCache过滤器用于缓存你查询结果,这样可以提高用户体验,也可以减少查询次数.它有以下属性: Duration :缓存的时间, 以 ...

  4. iOS常用方法

    1.磁盘总空间大小 + (CGFloat)diskOfAllSizeMBytes {     CGFloat size = 0.0;     NSError *error;     NSDiction ...

  5. layout内容整理

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  6. python网络编程【二】(使用UDP)

    UDP通信几乎不使用文件对象,因为他们往往不能为数据如何发送和接受提供足够的控制.下面是一个基本的UPD客户端: #!/usr/bin/env python import socket,sys hos ...

  7. JSP内置对象---用户登录页面(get和post)

    Login.jsp 页面: <%@ page language="java" import="java.util.*" contentType=" ...

  8. 基于H5的移动端开发,window.location.href在IOS系统无法触发问题

    最近负责公司的微信公众号开发项目,基于H5进行开发,某些页面window.location.href在Android机上能正常运行而IOS系统上无法运行,导致无法重定向到指定页面,查了好久终于找到方法 ...

  9. 支付宝集成后报错ALI38173

    原因: 支付时传的参数不正确. 出现这个错误, 说明支付功能已经集成成功, 前后台核对下参数就能找到原因了.

  10. linux查看系统命令

    [root@server ~] # uname –a                       # 查看内核/操作系统/CPU信息的linux系统信息命令 [root@server ~] # hea ...