一些实用却很少用到的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…

三 JSP 技术

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

Vue基础之事件处理器

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

分享SharpZipLip使用代码

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

Vue基础之表单控件绑定

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

Vue基础之组件

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

反射获取类的几种方法

1 public class Demo {2 3 /**4 * 反射&#xff1a;加载类&#xff0c;获得类的字节码5 * param args6 * throws ClassNotFoundException 7 */8 public static void main(String[] args) throws ClassNotFoundException {9 10 //…

Webpack基础之四个核心介绍

入口(Entry)&#xff1a; webpack 将创建所有应用程序的依赖关系图表(dependency graph)。图表的起点被称之为入口起点(entry point)。入口起点告诉 webpack 从哪里开始&#xff0c;并遵循着依赖关系图表知道要打包什么。可以将您应用程序的入口起点认为是根上下文(contextual…

为什么防火墙透传不过去VLAN11?

今天遇到一个问题请大家帮分析一下!2950上有两个VLAN需要通过防火墙透传VLAN1和VLAN11现在的问题是:VLAN11不能通过防火墙透传!vlan1可以透传过去.转载于:https://blog.51cto.com/liuzhu/59913

不能以根用户身份运行 Google Chrome 浏览器

在fedora12中安装了chrome浏览器&#xff0c;但是一运行出现以下提示&#xff1a; 不能以根用户身份运行 Google Chrome 浏览器。请以普通用户身份启动“Google Chrome 浏览器”。要以根用户身份运行&#xff0c;您必须为个人资料信息的存储指定其他的“--user-data-dir”。 …

Webpack基础之入口起点

入口起点(Entry Points) 单个入口&#xff08;简写&#xff09;语法&#xff1a; 用法&#xff1a;entry: string|Array<string> entry 属性的单个入口语法&#xff0c;是下面的简写 当你向 entry 传入一个数组时会发生什么&#xff1f;向 entry 属性传入「文件路…

js的动态加载、缓存、更新以及复用(四)

本来想一气呵成&#xff0c;把加载的过程都写了&#xff0c;但是卡着呢&#xff0c;所以只好在分成两份了。 1、页面里使用<script>来加载 boot.js 。 2、然后在boot.js里面动态加载 bootLoad.js。以时间作为标识 var dateVer date.getYear() _ date.getMonth() _ d…

Webpack基础之输出

输出(Output) output 选项控制 webpack 如何向硬盘写入编译文件。注意&#xff0c;即使可以存在多个入口起点&#xff0c;但只指定一个输出配置 用法(Usage)&#xff1a; 在 webpack 中配置 output 属性的最低要求是&#xff0c;将它的值设置为一个对象&#xff0c;包括以下…

[見好就收]NET 2.0 - WinForm Control - DataGridView 编程36计

原文:http://blog.csdn.net/fangxinggood/archive/2007/04/11/1561011.aspx#A1NET 2.0 - WinForm Control - DataGridView 编程36计&#xff08;一&#xff09;目录&#xff1a; ① 取得或者修改当前单元格的内容 ② 设定单元格只读 ③ 不显示最下面的新行 ④ 判断新增行 ⑤…

Webpack基础之加载器

加载器(Loaders)&#xff1a; loader 是对应用程序中资源文件进行转换。它们是&#xff08;运行在 Node.js 中的&#xff09;函数&#xff0c;可以将资源文件作为参数的来源&#xff0c;然后返回新的资源文件 示例&#xff1a; 例如&#xff0c;你可以使用 loader 告诉 webp…

历届试题 兰顿蚂蚁

http://lx.lanqiao.org/problem.page?gpidT125 历届试题 兰顿蚂蚁 时间限制&#xff1a;1.0s 内存限制&#xff1a;256.0MB问题描述兰顿蚂蚁&#xff0c;是于1986年&#xff0c;由克里斯兰顿提出来的&#xff0c;属于细胞自动机的一种。平面上的正方形格子被填上黑色或白色…

【转】基于XML-RPC的BloggerAPI学习

Luliang的mail2blog脚本&#xff0c;通过基于XML-RPC的BloggerAPI来实现的发布blog的功能。BloggerAPI是一套程序接口&#xff0c;用以支持远程操作blog.这个规范现在的版本是1.0&#xff0c;是个试验版本和α版本。但是&#xff0c;规范的研发人员不再对BloggerAPI进一步地开发…

Webpack基础之插件

插件(Plugins)&#xff1a; 插件是 wepback 的支柱功能。在你使用 webpack 配置时&#xff0c;webpack 自身也构建于同样的插件系统上&#xff01; 插件目的在于解决 loader 无法实现的其他事 剖析&#xff1a; webpack 插件是一个具有 apply 属性的 JavaScript 对象。 app…

Flex布局实战篇

网格布局&#xff1a; 1.基本网格布局&#xff1a; 最简单的网格布局&#xff0c;就是平均分布。在容器里面平均分配空间&#xff0c;只是需要设置项目的自动缩放 HTML代码如下 CSS代码如下 因为每个网格都已经设置好了固定的百分比空间&#xff0c;唯一要做的就是给…

javascript学习系列(2):数组中的filter方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说f…