css属性与关键字

css属性与关键字

css实用属性

pointer-events

1. pointer-events:none; 元素永远不会成为鼠标事件的target (en-US)。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

pointer-events 使用场景

例如底图为地图，地图上悬浮若干盒子（层级高，有宽度），盒子里无内容区域可拖拽层级下的地图，有内容区域可在地图层级之上展示并可操作。

.page{
  position: relative;
  display: flex;
  flex: 10 10 auto;
}

#map-container {
  position: relative;
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  z-index: 1;
}
/*盒子设置为none */
.box{  
  position: absolute;
  z-index: 10;
  width: calc(100% - 28px);  
  pointer-events: none;
}
/*子盒子设置值（内容在子盒子里） */
.box span {
  pointer-events: auto;
}

CSS关键字

关键字

1. inherit 继承父级属性
2. initial 初始化属性
3. unset 如果这个属性本来有从父级继承的值（这个属性默认可以继承，且父级有定义），则将该属性重新设置为继承的值，如果没有继承父级样式，则将该属性重新设置为初始值。
4. revert 关键字可以让当前元素的样式还原成浏览器内置的样式。

作用

1. 样式穿透初始化某属性的值。

/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background-color: unset;//或initial、inherit  
}

.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background-color: #F5F7FA;//此时这个值不起作用
}