12个css高级技巧汇总

使用: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:first-chlid ~li{border-right:1px solid #666;}

给body添加行高

    不需要分别添加line-height 到每个<p>,<h*>等，只要添加到body即可

body{line-height:1;}

     这样文本元素就可以很容易的从body继承

所有一切都垂直居中

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

body{

            -webkit-align-items:center;

            -ms-flex-align:center;

            align-items:center;

            display:-webkit-flex;

            display:flex;

}

逗号分隔的列表

让HTML列表项看上去像一个真正的，用逗号分隔的列表：

ul>li:not(:last-child)::after{content:",";}

对最后一个列表项使用:not()伪类

使用负的nth-child选择项目

在css中使用负的nth-child选择项目1到项目n

li {display：none;}

/*select items 1 through 3 and display them*/

li：nth-child（-n+3）{

    display:block;

}

对图标使用SVG

logo.svg

  SVG对所有的分辨率类型都具有良好的扩展性，并支持所有浏览器都回归到IE9,这样可以避开.png,.jpg.gif文件了

优化显示文本

有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你：

html{

        -moz-osx-font-smoothing:grayscale;

        -webkit-font-smoothing:antialiased;

        text-rendering:optimizelegibility;

}

对纯CSS滑块使用max-height

使用max-height和溢出隐藏来实现只有CSS的滑块：

.slider ul{max-height:0;overlow:hodden;}

.slider:hover ul{max-height:1000px;transition:  .3s ease;}

继承box-sizing

上box-sizing集成html:

html{box-sizing:border-box;}

*,*:before.*:after{box-sizing:inherit;}

这样在插件或杠杆其他行为的其他组件中就能更容易的改变box-sizing了

表格单元格等宽

.calendar{table-layout:fixed;}

用Flexbox摆脱外边距的各种hack

当需要使用到列分隔符时，通过flexbox的space-between属性，你就可以摆脱nth-，first-，和last-child的hack了：

.list{

        display：flex；

        justify-content：space-between；

}

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

现在，列表分隔符就会在均匀间隔的位置出现

使用属性选择器用于空链接

当<a>元素没有文本值，但href属性有链接的时候显示连接：

a[href^="http"]:empty::before{content:attr(href);}