CSS使用高级技巧合集(三)
- 原创经验
- |
- 更新：
- |
想要成为一名软件工程师，对于一些程序语言一定要全面进行了解和掌握，比如基础的代码、CSS样式、数据库等等，这些都是电脑软件工程师需要掌握的基本技能，今天要给大家介绍的是CSS使用高级技巧，下面我们就一起来看看吧。
具体内容
-
使用负的 nth-child 来选择元素
使用负的 nth-child 可以选择1 至 n 个元素。
li {
display: none;*
}
/ 选择第 1 至第 3 个元素并显示出来 /
li:nth-child(-n+3) {
display: block;*
}
或许你已经掌握了如何使用 :not()这个技巧，试下这个：
/ 选择除前3个之外的所有项目，并显示它们 /
li:not(:nth-child(-n+3)) {
display: none;*
}
-
使用 “形似猫头鹰” 的选择器
这个名字可能比较陌生，不过通用选择器 (*) 和 相邻兄弟选择器 (+) 一起使用，效果非凡：
** + * {*
margin-top: 1.5em;*
}
在此示例中，文档流中的所有的相邻兄弟元素将都将设置 margin-top: 1.5em的样式。
更多 “形似猫头鹰” 的选择器，可参考 A List Apart 上面 Heydon Pickering 的文章
-
使用 SVG 图标
没有理由不使用 SVG 图标：
.logo {
background: url("logo.svg");*
}
SVG 在所有分辨率下都可以良好缩放，并且支持所有 IE9 以后的浏览器，丢掉你的 .png, .jpg, 或 .gif-jif-whatev 文件吧。
注意： 针对仅有图标的按钮，如果 SVG 没有加载成功的话，以下样式对无障碍有所帮助：
.no-svg .icon-only::after {
content: attr(aria-label);*
}
-
使用 max-height 来建立纯 CSS 的滑块
max-height 与overflow hidden 一起来建立纯 CSS 的滑块：
.slider {
max-height: 200px;*
overflow-y: hidden;*
width: 300px;*
}
.slider:hover {
max-height: 600px;*
overflow-y: scroll;*
}
鼠标移入滑块元素时增大它的 max-height 值，便可以显示溢出部分。
注意事项
-
在这里要提醒大家，支持以上这些技巧的情况，都适用于最新版的 Chrome, Firefox, Safari, Opera,Edge, 以及 IE11，作为一名大学生，如果想要从事软件行业，想要成为优秀的软件工程师，那就把以上的CSS使用高级技巧学起来吧。
