1、p:first-letter
p标签里的第一个字设置样式
p:first-letter
{
font-size:200%;
color:#8A2BE2;
}
<p>My best friend is Mickey.</p>
2、p:first-line
p标签里的设置第一行样式
3、:not(p)
设置非 p元素的所有元素的背景色
4、<hr>
被水平线分隔的标题和段落
5、CSS里的pointer-events属性
本文要说的pointer-events的风格更像JavaScript,它能够:
阻止用户的点击动作产生任何效果
阻止缺省鼠标指针的显示
阻止CSS里的hover和active状态的变化触发事件
阻止JavaScript点击动作触发的事件
一个CSS属性能做所有的这么多事情!
这个pointer-events属性有很多可以使用的属性值,但大部分都是针对SVG的:auto, none, visiblePainted*, visibleFill*, visibleStroke*, visible*, painted*, fill*, stroke*, all*, 以及 inherit。其中none值能阻止点击、状态变化和鼠标指针变化:
.disabled { pointer-events: none; }
一些需要注意的关于pointer-events的事项:
子元素可以声明pointer-events来解禁父元素的阻止鼠标事件限制。
如果你对一个元素设置了click事件监听器,然后你移除了pointer-events样式声明,或把它的值改变为auto,监听器会重新生效。基本上,监听器会遵守pointer-events的设定。
6、touch-action
CSS属性 touch-action 用于设置触摸屏用户如何操纵元素的区域(例如,浏览器内置的缩放功能)。
7、https://blog.csdn.net/shenxianhui1995/article/details/109113462
safe-area-inset-left:安全区域距离左边边界距离
safe-area-inset-right:安全区域距离右边边界距离
safe-area-inset-top:安全区域距离顶部边界距离
safe-area-inset-bottom:安全区域距离底部边界距离
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);