CSS小技巧

pointer-events属性

• 阻止用户的点击动作产生任何效果
• 阻止缺省鼠标指针的显示
• 阻止CSS里的hover和active状态的变化触发事件
• 阻止JavaScript点击动作触发的事件
• **ointer-events:none可以阻止开发者工具箭头选中**

after、before伪类元素插入图片

• content:url(.....)--不能控制图片尺寸
• background-image:url(...)--可以有用background-size控制

伪类元素显示内容

•  content:attr(class/或其他自定义属性)---attr(属性)函数可以返回所选元素的属性值

逗号分离的列表 

使用伪类:not() ，这样最后一个元素不会被添加逗号。

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

使用负 nth-child 选择

选择1-3的元素 

li:nth-child(-n+3) {
   background: red;
}

继承box-sizing、line-height

html {
  box-sizing: border-box;
}
body {
     line-height: 1;
}
 *:before, *:after {
  box-sizing: inherit;
}