一些实用却很少用到的css以及标签

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407686.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue基础之Vue列表渲染

列表渲染 我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法&#xff0c; items 是源数据数组并且 item 是数组元素迭代的别名 基本用法&#xff1a; 在 v-for 块中&#xff0c;我们拥有对父作用域属性的完全访问权限。 v-f…

Pro*c使用指示变量来处理NULL列值

代码&#xff1a;xx.pc /* 功能&#xff1a;演示了Oracle使用指示变量(专门用来处理NULL值)指示变量专门用于处理数据库的NULL值&#xff0c;它是一种short类型的C语言变量。当执行内嵌SELECT语句或FETCH语句时&#xff0c;如果不引用指示变量&#xff0c;并且返回值为NULL&am…

React开发(101):样式处理

{title: 品牌信息,dataIndex: intro,render: (text, row) > {return (<div><div style{{ float: left }}><img src{row.logo} style{{ width: 100px, height: 100px }} /></div><div style{{ float: left, marginLeft: 24px }}><p>{row…

三 JSP 技术

一 JSP 概述 1. 本质&#xff1a;在 HTML 语言中混合 Java 程序代码&#xff0c;由服务器端 Java 语言引擎解释执行。其中&#xff0c;HTML 负责描述信息显示格式&#xff0c;JSP 负责描述处理逻辑。 2. JSP 代码运行环境&#xff1a;需要系统安装 JSP 引擎&#xff0c;最常用的…

Don't Laugh!I'm An English Book笔记(五)——面部词语大总结加补充

head hairscalp&#xff1a;头皮dandruff&#xff1a;头皮屑braincerebral deathforeheadwrinkleeyebroweyelideyeeyelashcrows feetdouble eyelidnosesnub nose strawberry noseaquiline nosenostrilvibrissa&#xff1a;鼻毛cheek earearlobe&#xff1a;耳唇facial hairmous…

vue 3D旋转木马轮播图

利用carousel-3d插件。 安装 npm install -S vue-carousel-3d全局引入 import Vue from vue import Carousel3d from vue-carousel-3d Vue.use(Carousel3d&#xff09;局部引入 import { Carousel3d, Slide } from "vue-carousel-3d";export default {components:…

Vue基础之事件处理器

监听事件&#xff1a; 可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码 示例 方法事件处理器&#xff1a; 许多事件处理的逻辑都很复杂&#xff0c;所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用 示例 内…

React开发(102):别写立即执行函数

<Buttontype"link"onClick{() > {this.handlePro(row.certificationImg);}}>查看</Button>

删除windows换行符^M

有些内容从windows下拷贝到unix下后&#xff0c;发现文本文件中多了^M&#xff08;在vim中查看&#xff09;&#xff0c;那么如何删除这个字符呢。 在网上找了下答案&#xff0c;有好几种方法&#xff0c;但是我试了下&#xff0c;只有一种是成功的&#xff0c;那就是”tr -d &…

React开发(103):详细路径 不然找不到

import { BaseTabs, BaseUploadImage, BaseHighSearch, BaseTable } from /common/components; import BaseTables from /common/components/BaseTables;

vmin、vmax用处

vmin、vmax用处 100vmin指的是屏幕宽和高中较小的那个 100vmax指的是屏幕宽和高中较大的那个 做移动页面开发时&#xff0c;如果使用 vw、wh 设置字体大小&#xff08;比如 5vw&#xff09;&#xff0c;在竖屏和横屏状态下显示的字体大小是不一样的。 由于 vmin 和 vmax 是当…

分享SharpZipLip使用代码

zip类public class ZipClass { /**//// <summary> /// 压缩方法 /// </summary> /// <param name"strPath">要压缩文件夹</param> /// <param name"strFileName">生成的文件名</p…

Vue基础之表单控件绑定

你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇&#xff0c;但 v-model 本质上不过是语法糖&#xff0c;它负责监听用户的输入事件以更新数据&#xff0c;并特别处理一些极端的例子 基础用法&#xff1…

Makefile函数使用

使用函数 在Makefile中可以使用函数来处理变量&#xff0c;从而让我们的命令或是规则更为的灵活和具有智能。make所支持的函数也不算很多&#xff0c;不过已经足够我们的操作了。函数调用后&#xff0c;函数的返回值可以当做变量来使用。 [编辑] 函数的调用语法 函数调用&am…

[LeetCode] Search in Rotated Sorted Array

二分 : 判断条件 当a[left] < a[mid]时&#xff0c;可以肯定a[left..mid]是升序的 循环有序 一共有以下两种情况 第一种 / / / /    /  /  条件&#xff1a; (A[mid] > A[low]) &#xff0c;low~mid 二分&#xff0c;mid~high 递归 第二种 /  / / /   / /  条件…

失败者的特征

1 狂妄自大型:自以为老子天下第一,认为自己的认识才是正确的,才是没有错误的,实际上这些人的知识大部分来自于道听途说或是妄自没有求证的猜测就下定论,并一棍子打死,还不允许其它人也相信.2 口是心非型:心里面还是相信有某种力量能够支配人生,甚至还会经常拿着彩票的轨迹图天天…

@keyframes中translate和scale混用问题

当你动画的这个节点用到translate定位居中时&#xff0c;再使用动画scale就会出现不居中的问题 这时需要把keyframes中translate写在scale的前面就解决了 keyframes bubble-in {0% {transform:translateX(-50%) scale(0);}100% {transform:translateX(-50%) scale(1);} }

导入 IMP

Oracle 的导入实用程序 (Import utility) 允许从数据库提取数据&#xff0c;并且将数据写入操作系统文件。 imp 使用的基本格式&#xff1a; imp[username[/password[service]]] &#xff0c;以下例举 imp 常用用法。 1. 获取帮助 imp helpy 2. 导入一个完整数据库 imp sy…

Vue基础之组件

什么是组件&#xff1f; 组件&#xff08;Component&#xff09;是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素&#xff0c;封装可重用的代码。在较高层面上&#xff0c;组件是自定义元素&#xff0c; Vue.js 的编译器为它添加特殊功能。在有些情况下&#xff0c;组件也…