CSS中的calc()以及nth-of-type()

启福 26条评论

昨天折腾某主题时发现，两列的相册和一列的相册，右端对不齐。我当然忍不了，于是看了一下它的css文件，发现原来是主题的原作者数学不好，最大宽度算错了，而且宽度width小于最大宽度max-width，他这逻辑也是可以了……

不过在css文件中，还是学到了一点东西的，比如“calc()”，括号里面可以填写表达式，表达式里面允许使用“+、-、*、/、()”。

在通常的css属性比如宽度中，指定百分比“%”或者像素“px”就够了，但是使用calc()可以更加灵活。比如，一行有三个div，它们的外边距margin都是固定的10px，那么每个div的宽度如何设置，才可以保证在响应式页面中，无论父元素宽度怎么变化，始终可以刚刚好填满呢？设置“width: 33.3%;”？由于外边距的存在，三个div的总宽度显然会超出父元素的宽度。设置小一点比如“width: 30%;”？那么当父级宽度大于600px时，则填不满；小于600px时，则超出。

在这种情况下，就可以设置“width: calc(100% / 3 – 20px);”，完美解决以上问题。当然，为了兼容性，通常需要把带浏览器前缀的一并写上，如下：

.div-123{
    margin:10px;
    width:27%;
    //向不支持calc()的浏览器妥协，该百分比保证父级最小宽度为320px时不超出；或者将margin修改为百分比形式！
    width:    -moz-calc(100% / 3 - 20px);
    width: -webkit-calc(100% / 3 - 20px);
    width:         calc(100% / 3 - 20px);
}

大部分浏览器都可以支持了，除非很老的，那就要尝试其它css属性值或者用js了。需要注意的是，表达式中的加减号，前后必须有空格，否则识别错误。

还有一个css选择器“:nth-of-type(N)”，它可以用来选择【其父元素的特定类型的第N个子元素】，里面的N可以写数字，表示第几个；可以是关键词比如odd或even，表示所有的奇数或者偶数；还可以是表达式比如3n，表示所有3的倍数（n代表自增的整数）。还是以上述div举例，假如每行有三个div，有很多行，我希望给每行的最后一个div设置一个橙色的右边框，怎么办？如下：

.div-123:nth-of-type(3n){
    border-right:1px solid orange;
}

当然，还有个与它类似的“:nth-child(N)”，用法大体相似，它可以用来选择【其父元素的第N个子元素，不论元素的类型】。简单总结一下就是N在计数时，“:nth-child(N)”把父元素的所有子元素全数一遍，而“:nth-of-type(N)”只数与“:”前面的标签相同的子元素。

之前只用过“first-child”、“last-child”这些简单的选择器，所以今天简单分享一下哈。

随便看看

本文共有26条评论

    1. 这样挺好的，可以省去很多js内容，减少开发成本，毕竟现在的网页，很大一部分文件资源都是js。

      回复

  6. 不错的教程

    博客导航 诚邀博主加入博主Q群 33832398 里边可以多交朋友 换友链 将来流量多多哦

    同时呢，博客导航 qiusongsong.net/dh/ 已收录贵站 欢迎多多互访哦！

    回复

    1. 实际上，百分比就够用了。文中的情况只是为了举例子的，还可以外套一层div实现相同的效果。

      回复

    1. 数据是通过微博API获取，然后存在数据库的，每次打开页面都是访问的自己服务器，所以HTTPS当然可以。
      可惜的是，新浪已经限制了API，只能获取最新5条，我这样逐条保持更新可以，你要想获取全部数据，可能不好办了。可以尝试爬取网页或者他们提供的微博秀工具。

      回复

      1. 老乡看来挺厉害的。嗯，我试过微博秀，但是微博秀只能HTTP，我的HTTPS直接给BLOCK了。新浪微博加密不知得等到何时。

        回复

你好，哪位？ 填写