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;
}

 

posted @ 2017-02-08 13:54  chengJun—  阅读(277)  评论(0编辑  收藏  举报