css你所不知道技巧
利用属性选择器来选择空链接
当 <a>
元素没有文本内容,但有 href
属性的时候,显示它的 href
属性:
a[href^="http"]:empty::before { content: attr(href); }
创造格子等宽的表格
table-layout: fixed
可以让每个格子保持等宽:
table { border: 1px solid #ccc; border-collapse: collapse; table-layout: fixed; width: 100%; }
使用 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; }
逗号分隔列表
使列表的每项都由逗号分隔:
ul > li:not(:last-child)::after { content: ","; }
给 “默认” 链接定义样式
给 “默认” 链接定义样式:
a[href]:not([class]) { color: #008000; text-decoration: underline; }
通过 CMS 系统插入的链接,通常没有 class
属性,以上样式可以甄别它们,而且不会影响其它样式。
使用选择器:root
来控制字体弹性
在响应式布局中,字体大小应需要根据不同的视口进行调整。你可以计算字体大小根据视口高度的字体大小和宽度,这时需要用到:root
:
:root { font-size: calc(1vw + 1vh + .5vmin); }
现在,您可以使用 root em
body { font: 1rem/1.6 sans-serif; }