css3 新增

1、属性选择器
选取标签带有某些特殊属性的选择器 我们成为属性选择器

 div[class=demo] { /*  选出div中类名为demo的标签 */
			color: pink;
		}
div[class^=font] { /*  选出div中类名以font开头的标签 */
			color: pink;
		}
div[class$=footer] { /*  选出div中类名以footer结束的标签 */
			color: skyblue;
		}
div[class*=tao] { /* 选出div中类名包含bao的标签 */
			color: green;
		}

2、伪元素选择器，E::before和E::after

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用，content属性表示伪元素的内容。

div::before {
  content:"开始"; /*  在div之前添加内容“开始” */
div::after {
  content:"结束"; /* 在div之后添加内容“结束” */
}

3、盒模型
可以分成两种情况：

a、box-sizing（默认）: content-box 盒子大小为 width + padding + border
content-box:此值为其默认值，其让元素维持W3C的标准Box Mode

b、box-sizing: border-box 盒子大小为 width，就是说 padding 和 border
是包含到width里面的，content的宽度值是会自动调整的。

4、结构(位置)伪类选择器

li:first-child { /*  选择父元素的第一个孩子,且为li标签 */
              
            }
li:last-child {   /* 选择父元素的最后一个孩子，且为li标签 */
               
            }
li:nth-child(n) {   /* 选择父元素的第n个孩子，且为li标签 */ 
           
           }      
li:nth-of-type(1){ /*  选择第一个标签为li的孩子 */
    	  
    	   }
li:nth-child(odd){/*  选择所有标签为li，且为奇数的孩子 */
        
           }
li:nth-child(even){/*  选择所有标签为li，且为偶数的孩子 */
      
           }

5、pointer-events属性
pointer-events是css3的一个属性，指定在什么情况下元素可以成为鼠标事件的target（包括鼠标的样式）

属性详情介绍：
auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。

none——元素永远不会成为鼠标事件的target（目标）。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。实际上默 认就可以穿透当前层，因为pointer-events默认为auto
适用场景：

1. 给地图上层的元素设置pointer-events： none，保证地图可拖动或点击
2. 禁用 a 标签事件效果
3. 点击提交按钮的时候，为了防止用户一直点击按钮，发送请求，当请求未返回结果之前，给按钮增加 pointer-events: none，可以防止这种情况。
4. 防止透明元素和可点击元素重叠不能点击

参考： https://www.cnblogs.com/kunmomo/p/11752669.html