你知道css禁止选中文本、选择首行文本、选择首字母、选择高亮（被选中）的区域怎么操作吗？

最新推荐文章于 2021-08-06 11:22:17 发布
最新推荐文章于 2021-08-06 11:22:17 发布
阅读量498 收藏 4
点赞数 1
分类专栏： css日常总结 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41880073/article/details/114974934
版权

你知道css禁止选中文本、选择首行文本、选择首字母、选择高亮（被选中）的区域怎么操作吗？

1、css禁止选中文本

只需要添加这样一个属性user-select: none;
举个例子
没添加之前
在这里插入图片描述
点着点着就选中了这些文本，太影响页面美观了，没有很好的用户体验
添加了之后
在这里插入图片描述
随便你怎么点，都不会变样。
再说一下它的另外几个取值
text：文本可以被选择
all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文点击子元素，那么被选择的部分将是以该元素向上回溯的最高祖元素。
element：可以选择文本，但选择范围受元素边界的约束。

2、css伪类选择器::first-line|选择文本的首行。

这个伪元素选择器选择换行之前文本的首行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
最低0.47元/天 解锁文章
丑小鸭变黑天鹅
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 取消文本选择状态,CSS禁用文本选择(CSS disable text selection)
weixin_42397739的博客
08-04 1063
目前，我已经在body标签把这个禁用文字选择：body {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}然而，我的input和textarea框现在可选择。 我如何只能让这些输入元素选择，其余不可选择？Answer 1:不要将这些属性应用到整个身体。 它们移到类...
css 首字母选择器
weixin_38942717的博客
07-03 597
转载自 片段社区 // Css 首字母选择器 :first-letter p:first-letter{ color: red }
[css] 如何禁用移动的选择高亮？
歌谣的博客
01-30 198
[css] 如何禁用移动的选择高亮？ *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /*IE10*/ user-select
16个非常有用的CSS伪选择器，你千万不要错过了！
web前端开发
07-03 445
英文 |https://blog.bitsrc.io/css-pseudo-selectors-you-never-knew-existed-b5c0ddaa8116译文 |http...
CSS
无区新手的博客
02-28 442
伪类选择器 选中某些元素的某种状态 1）link：超链接未访问时的状态 2）visited：超链接访问过后的状态 3）hover：鼠标悬停时的状态 4）active：激活状态，鼠标按下时的状态 注意：当存在这四种选择器时，应该按1-2-3-4的顺序执行，否则会出问题（爱恨法则） 伪元素选择器 ::before ::after 实例： <!DOCTYPE h...
CSS定义被动态选中的文本的颜色示例代码
09-25
定义被动态选中的文本内容的颜色实现方法有很多，在本文将使用css来实现，感兴趣的朋友不要错过
WebView 自定义长按选择，实现收藏 / 分享选中文本
06-27
本文将深入探讨如何在WebView中实现自定义长按选择，以及选中文本的收藏和分享功能。 首先，我们需要了解WebView的基本用法。WebView继承自View类，它可以加载HTML、CSS、JavaScript等Web内容。通过调用`loadUrl()`...
javascript实现通过拼音首字母快速选择下拉列表
10-30
在JavaScript编程中，实现通过拼音首字母快速选择下拉列表是一项常见的交互优化技术，它可以提升用户的操作效率。这个功能的基本思路是：用户在输入字母时，程序会根据当前焦点在的下拉列表（select元素）中的选项，...
利用CSS3的特性改变文本选中时的颜色
09-25
选中文字时选区颜色变成了绿色，跟网站整体的绿色风格非常协调，其实实现很简单利用CSS3的特性，同样也可以指定部分元素设置选区颜色，详细如下，喜欢的朋友可以参考下
CSS禁止文字选择user-select应用
11-30
none：用户不能选择文本 text：用户可以选择文本 需要注意的是：user-select并不是一个W3C的CSS标准属性，浏览器支持的不完整，需要对每种浏览器进行调整 复制代码代码如下: body{ -moz-user-select: none; /*...
css实现扩大选中范围 (三种方法)
weixin_46719229的博客
08-06 1441
css实现扩大选中范围 HTML <style type="text/css"> <!-- 大盒子样式 --> .content{ position: relative; width: 60%; height: 400px; margin: 0 auto; border: 1px solid orange; } <!-- 关闭按钮样式 --> .clo
CSS：选择高亮（设置高亮状态的样式 / 禁止文本选择高亮）
Bule_daze的博客
07-14 6559
设置处于高亮状态的样式 - ::selection ::selection CSS伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。 只有一小部分CSS属性可以用于 ::selection 选择器。 禁止文本选择高亮 - user-select: none; CSS 属性 user-select 控制用户能否选中文本。 <!DOCTYPE html> <html lang="en"> <head> <meta charset=
before，after，首个字符,首行和选中样式等伪元素的使用
jt18729260336的博客
11-15 628
伪元素种类有很多，这里说::before,::after,first-letter,first-line,::selection这几个。 1.::before：可以在元素的内容前面插入新内容。 div::before{ /*必须添加content属性，否则后期不可见*/ content: ""; /*默认是行级元素，如果想设置宽高，就必须转换为块级元素,可以使用dis...
CSS3常见技巧（一）：如何禁止文本选择高亮
weixin_34174322的博客
02-01 367
根据 Can I use显示，目前user-select已经支持绝大多数浏览器了，不过如果想在IE9或者更早之前使用，还需要使用浏览器前缀。 代码如下 . noselect{ -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* ...
首*伪类选择器
howard2005的专栏
02-24 386
一、首子伪类选择器（first-child selector）1、效果2、代码&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;首子伪类选择器&lt;/title&gt; &lt;style t
css设置网页文本选中样式
weixin_30533797的博客
10-07 525
网页的默认的文本选中颜色是蓝底白字（大多应该是吧），这个样子： 感觉并不是特别好看，可以通过CSS3的一个特性，一个CSS3的伪类选择器::selection来设置文本被选中时的状态，比如本博客的主题（2016-10-7）： /*设置文本选中颜色，看起来更酷一些*/ ::selection { background:#DDDDDE; } ::-moz-se...
css基本语法
huiyinimen的博客
12-25 1037
css基本语法 css的定义方法是： 选择器 { 属性:值; 属性:值; 属性:值;} css页面引入方法： 1、外联式：通过link标签，链接到外部样式表到页面中。 &lt;link rel="stylesheet" type="text/css" href="css/main.css"&gt; 2、嵌入式：通过style标签，在网页上创建嵌入的样式表。 &lt;style type="te...
CSS :first-line 伪元素 用来指定选择器第一行的样式。
lanseguhui的博客
06-13 4856
first-line选择器用来指定选择器第一行的样式。:first-line是伪元素，它生成包含元素的第一个格式化行的伪元素。:first-line样式表示元素中的第一行文本，无论该行中可能出现多少个词。:first-line只能附加到块级元素。可以应用到首字母的属性是有限的。注意: :first-line选择器可以使用以下属性： font propertiescolor properties b...
前端学习（257）:flex-direction
歌谣的博客
12-30 291
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
CSS基础1-基础选择器+字体文本相关样式
12-05
CSS基础选择器和字体文本相关样式 CSS 是一种层叠样式表语言，用于控制网页的样式和布局。CSS 的主要作用是给 HTML 标签设置样式，使网页更加美观和易用。本篇文章将介绍 CSS 的基础知识，包括基础选择器和字体...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值