Do you know how css prohibits selecting text, selecting the first line of text, selecting the first letter, and selecting the highlighted (selected) area?
1. CSS prohibits selected text
Just add such an attribute user-select: none;
for example,
before adding,
click and click to select these texts, which affects the beauty of the page too much, and does not have a good user experience
. After adding it,
you can click whatever you want. Will change.
Let's talk about its other values
text: text can be selected
all: when all the content as a whole can be selected. If you double-click or click on a child element in the context, the selected part will be the highest ancestor element of the element.
element: Text can be selected, but the selection range is constrained by the boundary of the element.
2. CSS pseudo-class selector::first-line|Select the first line of text.
This pseudo-element selector selects the first line of text before the line break
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
border: 1px solid red;
}
p::first-line {
color: red;
}
</style>
</head>
<body>
<div>
<p>奥科吉斯卡哈尽快答复哈数据库德哈卡实践活动氨基酸肯
定会看见爱上奥科吉斯卡哈尽快答复哈数据库德哈卡实践活动氨基酸肯
定会看见爱上奥科吉斯卡哈尽快答复哈数据库德哈卡实践活动氨基酸肯
定会看见爱上奥科</p>
</div>
</body>
</html>
3. Select the first letter::first-letter
<div class="first">
<p>aksadjklahkljasklf</p>
</div>
.first {
width: 200px;
height: 100px;
border: 1px solid red;
}
.first p::first-letter {
color: red;
}
4. Select the highlighted (selected) area::selection
Applies to any highlighted area selected by the user. If you have used the software to browse pdf, then you must know that when you select some fonts, it will have a yellow background, the following example is to achieve this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 300px;
height: 200px;
border: 1px solid red;
}
div::selection {
background-color: yellow;
}
</style>
</head>
<body>
<div>
爱上咖啡机安徽省非框架哈萨克就复活卡爱上咖啡机
安徽省非框架哈萨克就复活卡爱上咖啡机安徽省非框架哈萨克就复活卡
爱上咖啡机安徽省非框架哈萨克就复活卡
爱上咖啡机安徽省非框架哈萨克就复活卡
爱上咖啡机安徽省非框架哈萨克就复活卡
</div>
</body>
</html>
If, the first screen,
when you select some text, come
on, IT guys!