web前端优秀程序员分享以下CSS进阶技巧，我不告诉一般人。使用:not()在菜单上应用/取消应用边框 将行高添加到正文 将所有内容垂直居中 逗号分隔列表 选择第n个孩子为负数的项目♂使用SVG对于图标 优化显示文本 使用最大高度 对于纯CSS滑块一个hack 为空链接使用属性选择器 使用:not()在菜单上应用/取消应用边框 首先给每个菜单项添加边框1.
2.
3.
/添加边框/
4.
.navli{
5.
border-right:1pxsolid#666;
6.
}
...然后删除最后一个元素... //删除边框/1.
.navli:last-child{
2.
border-right:none;
3.
}
4.
...您可以使用:not()伪类直接应用元素：
5.
.navli:not(:last-child){
6.
border-right:1pxsolid#666;
7.
}
代码简洁，易读，易懂。 当然，如果你的新元素有兄弟元素，你也可以使用通用兄弟选择器（~）： ..navli:first-child~li{1.
border-left:1pxsolid#666;
2.
}
添加行高到正文 你不需要分别为每个添加行高，等等。只需添加到正文： body{1.
line-height:1;
2.
}
让文字元素轻松从身体继承。一切垂直居中 要让所有元素垂直居中，太简单了：1.
2.
3.
html,body{
4.
高度：100%；
5.
边距：0；
6.
}
7.
body{
8.
-webkit-align-items:center;
9.
-ms-flex-align:center;
10.
align-items:center;
11.
display:-webkit-flex;
12.
display:flex;
13.
}
看，是不是很简单。 注意：小心IE11中的flexbox。逗号分隔列表 使HTML列表项看起来像一个真正的逗号分隔列表：1.
2.
3.
ul>li:not(:last-child)::after{
4.
content:",";
5.
}
对于最后一个列表项：not()伪类。Selectingitemswithnegativenth-child 在CSS中使用负的nth-child选择项目1到项目n。 li{1.
显示：无；
2.
}
3.
/选择1到3项显示/
4.
li:nth-child(-n+3){
5.
display:block;
5.
显示：块；
6.
}
就是这么简单。为图标使用SVG 我们没有理由不为图标使用SVG：1.
.logo{
2.
background:url("logo.svg");
3.
}
SVG对所有分辨率类型都具有很好的扩展性，并且支持回到IE9的所有浏览器。这避免了.png、.jpg或.gif文件。 优化显示文字 有时字体无法在所有设备上以最佳方式显示，因此让设备浏览器帮助您：1.
2.
3.
html{
4.
-moz-osx-font-smoothing：灰度；
5.
-webkit-font-smoothing：抗锯齿；
6.
文本渲染：optimizeLegibility;
7.
}/font>
注意：请负责任地使用optimizeLegibility。此外，IE/Edge不支持文本呈现。为纯CSS滑块使用最大高度 为纯CSS滑块使用最大高度和溢出隐藏： .sliderul{1.
max-height:0;
2.
overlow:hidden;
3.
}
4.
.slider:hoverul{
5.
max-height:1000px;
6.
transition:.3sease;
7.
fontsize="3"> }
1.
继承box-sizing
2.
让box-sizing继承html:
3.
html{
4.
box-sizing:border-box;
5.
}
6.
,:before,*:after{
7.
box-sizing:inherit;
8.
}
这使得在插件或其他利用其他行为的组件中更改框大小变得更容易。 等宽表格单元格 表格操作起来很麻烦，所以一定要尽量使用table-layout:fixed，保持单元格宽度相同：1.
.calendar{
2.
table-layout:fixed;
3.
}
使用Flexbox去除各种边距hack 当你需要使用列分隔符时，你可以通过flexbox的space-between属性去掉nth-,first-,last-childhacks:1.
.list{
2.
display:flex;
3.
justify-content:space-between;
4.
}
5.
.list.person{
6.
flex-basis：23%;
7.
}
现在列表分隔符会以均匀的间隔位置出现。 为空链接使用属性选择器 当[url=]元素没有文本值，但href属性有链接时显示链接：[/url][url=] a[href^="http"]:empty::before{1.
content:attr(href);
2.
}
还是蛮方便的。
