区块链技术博客
www.b2bchain.cn

CSS — 更灵活的保护🔐网页📄内容求职学习资料

本文介绍了CSS — 更灵活的保护🔐网页📄内容求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。


简介 Intro

user-select这个CSS属性可能对一部分程序员并不陌生,主要是用来保护自己作品上的文字类内容不被复制。但很多人不知道,这个属性除了可以简单粗暴的阻止用户选择网页上的文字,其实还可以更灵活的来规范用户的操作。今天我们就来一起深入的了解一下这个user-select属性。
CSS — 更灵活的保护🔐网页📄内容

常见用法

属性值 Attribute Values

关键值

user-select一共有五个属性关键值:

  1. none — 当设定为none值时,该元素及其子元素均不可选中;
  2. all — 当设定为all值时,单击该元素将选取所有内容(含子元素);
  3. text — 当设定为text值时,该元素内仅文字内容可被选取;
  4. contain — 当设定为contain值时,选取操作仅被允许在该元素范围内;
  5. auto — 当为auto值时,其作用取决于以下各应用条件:
    • 父元素 — 完全继承自父元素。即如果父元素是none, 那该子元素也是none;
    • 可编辑元素 — 具有contenteditbal属性的元素,其关健值为contain;
    • 伪元素 — 如::before::after,其关键值为none;
    • 其它 — 如以上条件无一满足,关健值则默认为text

CSS — 更灵活的保护🔐网页📄内容

关键值`auto`简单示例

CSS — 更灵活的保护🔐网页📄内容

参考实例

全局值

user-select一共有三个全局值,分别是inheritinitialunset。查阅了相关的资料,发现这三个值似乎并不太会用到(W3S里干脆都没提到)。所以这里简单带过,不再画蛇添足了。

提示 Tips

提示1:该属性不具备属性继承的属性(很拗口的样子👻️)

对的,虽然前面讲了子元素如果设成auto值,将继承其父元素的值。但官方强调了它自身并不是,也就是传说中的“官方具有最终解释权”🐶️。
其实也不难理解,儿子👦️开口了爹👨️才给,不开口就不给,决不会主动关心你😞️。继承😃️?不存在的😢️!

提示2:浏览器引擎前缀

为了能让尽可能多的浏览器配合,所以在使用这个属性的时候记得加上浏览器引擎前缀。

CSS — 更灵活的保护🔐网页📄内容

正确示范

提示3: 在按钮元素上的应用

按钮元素上的文字是用来提示用户其相应功能的。但如果在点击过程中文字也被选取高亮,就不像那么回事了。所以在这里可以利用该属性在伪元素上的特性,即将按钮文字设置在::before::aftercontent里,就可以避免这个问题。
CSS — 更灵活的保护🔐网页📄内容

提示4:浏览器支持


简介 Intro

user-select这个CSS属性可能对一部分程序员并不陌生,主要是用来保护自己作品上的文字类内容不被复制。但很多人不知道,这个属性除了可以简单粗暴的阻止用户选择网页上的文字,其实还可以更灵活的来规范用户的操作。今天我们就来一起深入的了解一下这个user-select属性。
CSS — 更灵活的保护🔐网页📄内容

常见用法

属性值 Attribute Values

关键值

user-select一共有五个属性关键值:

  1. none — 当设定为none值时,该元素及其子元素均不可选中;
  2. all — 当设定为all值时,单击该元素将选取所有内容(含子元素);
  3. text — 当设定为text值时,该元素内仅文字内容可被选取;
  4. contain — 当设定为contain值时,选取操作仅被允许在该元素范围内;
  5. auto — 当为auto值时,其作用取决于以下各应用条件:
    • 父元素 — 完全继承自父元素。即如果父元素是none, 那该子元素也是none;
    • 可编辑元素 — 具有contenteditbal属性的元素,其关健值为contain;
    • 伪元素 — 如::before::after,其关键值为none;
    • 其它 — 如以上条件无一满足,关健值则默认为text

CSS — 更灵活的保护🔐网页📄内容

关键值`auto`简单示例

CSS — 更灵活的保护🔐网页📄内容

参考实例

全局值

user-select一共有三个全局值,分别是inheritinitialunset。查阅了相关的资料,发现这三个值似乎并不太会用到(W3S里干脆都没提到)。所以这里简单带过,不再画蛇添足了。

提示 Tips

提示1:该属性不具备属性继承的属性(很拗口的样子👻️)

对的,虽然前面讲了子元素如果设成auto值,将继承其父元素的值。但官方强调了它自身并不是,也就是传说中的“官方具有最终解释权”🐶️。
其实也不难理解,儿子👦️开口了爹👨️才给,不开口就不给,决不会主动关心你😞️。继承😃️?不存在的😢️!

提示2:浏览器引擎前缀

为了能让尽可能多的浏览器配合,所以在使用这个属性的时候记得加上浏览器引擎前缀。

CSS — 更灵活的保护🔐网页📄内容

正确示范

提示3: 在按钮元素上的应用

按钮元素上的文字是用来提示用户其相应功能的。但如果在点击过程中文字也被选取高亮,就不像那么回事了。所以在这里可以利用该属性在伪元素上的特性,即将按钮文字设置在::before::aftercontent里,就可以避免这个问题。
CSS — 更灵活的保护🔐网页📄内容

提示4:浏览器支持


简介 Intro

user-select这个CSS属性可能对一部分程序员并不陌生,主要是用来保护自己作品上的文字类内容不被复制。但很多人不知道,这个属性除了可以简单粗暴的阻止用户选择网页上的文字,其实还可以更灵活的来规范用户的操作。今天我们就来一起深入的了解一下这个user-select属性。
CSS — 更灵活的保护🔐网页📄内容

常见用法

属性值 Attribute Values

关键值

user-select一共有五个属性关键值:

  1. none — 当设定为none值时,该元素及其子元素均不可选中;
  2. all — 当设定为all值时,单击该元素将选取所有内容(含子元素);
  3. text — 当设定为text值时,该元素内仅文字内容可被选取;
  4. contain — 当设定为contain值时,选取操作仅被允许在该元素范围内;
  5. auto — 当为auto值时,其作用取决于以下各应用条件:
    • 父元素 — 完全继承自父元素。即如果父元素是none, 那该子元素也是none;
    • 可编辑元素 — 具有contenteditbal属性的元素,其关健值为contain;
    • 伪元素 — 如::before::after,其关键值为none;
    • 其它 — 如以上条件无一满足,关健值则默认为text

CSS — 更灵活的保护🔐网页📄内容

关键值`auto`简单示例

CSS — 更灵活的保护🔐网页📄内容

参考实例

全局值

user-select一共有三个全局值,分别是inheritinitialunset。查阅了相关的资料,发现这三个值似乎并不太会用到(W3S里干脆都没提到)。所以这里简单带过,不再画蛇添足了。

提示 Tips

提示1:该属性不具备属性继承的属性(很拗口的样子👻️)

对的,虽然前面讲了子元素如果设成auto值,将继承其父元素的值。但官方强调了它自身并不是,也就是传说中的“官方具有最终解释权”🐶️。
其实也不难理解,儿子👦️开口了爹👨️才给,不开口就不给,决不会主动关心你😞️。继承😃️?不存在的😢️!

提示2:浏览器引擎前缀

为了能让尽可能多的浏览器配合,所以在使用这个属性的时候记得加上浏览器引擎前缀。

CSS — 更灵活的保护🔐网页📄内容

正确示范

提示3: 在按钮元素上的应用

按钮元素上的文字是用来提示用户其相应功能的。但如果在点击过程中文字也被选取高亮,就不像那么回事了。所以在这里可以利用该属性在伪元素上的特性,即将按钮文字设置在::before::aftercontent里,就可以避免这个问题。
CSS — 更灵活的保护🔐网页📄内容

提示4:浏览器支持

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » CSS — 更灵活的保护🔐网页📄内容求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们