cssがテキストの選択、テキストの最初の行の選択、最初の文字の選択、および強調表示された(選択された)領域の選択をどのように禁止しているか知っていますか?

cssがテキストの選択、テキストの最初の行の選択、最初の文字の選択、および強調表示された(選択された)領域の選択をどのように禁止しているか知っていますか?

1.CSSは選択されたテキストを禁止します

そのような属性を追加するだけですuser-select:none;
たとえば、
追加する前に、
ここに画像の説明を挿入します
クリックしてクリックしてこれらのテキストを選択します。これは、ページの美しさに影響を与えすぎ、ユーザーエクスペリエンスが良くありません
。追加した後、
ここに画像の説明を挿入します
次のことができます好きなものをクリックしてください。変更されます。
他の値について話しましょう
テキスト:テキストは
すべて選択できます:すべてのコンテンツ全体を選択できる場合。コンテキスト内の子要素をダブルクリックまたはクリックすると、選択したパーツが要素の最上位の祖先要素になります。
要素:テキストを選択できますが、選択範囲は要素の境界によって制限されます。

2.CSS疑似クラスselector :: first-line |テキストの最初の行を選択します。

この疑似要素セレクターは、改行の前のテキストの最初の行を選択します

<!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.最初の文字::最初の文字を選択します

		<div class="first">
			<p>aksadjklahkljasklf</p>
		</div>
			.first {
    
    
				width: 200px;
				height: 100px;
				border: 1px solid red;
			}
			
			.first p::first-letter {
    
    
				color: red;
			}

ここに画像の説明を挿入します

4.強調表示された(選択された)領域を選択します:: selection

ユーザーが選択した強調表示された領域に適用されます。ソフトウェアを使用してPDFを閲覧したことがある場合は、一部のフォントを選択すると、背景が黄色になることを知っておく必要があります。次の例では、これを実現しています。

<!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>

最初の画面で、
ここに画像の説明を挿入します
テキストを選択したとき
ここに画像の説明を挿入します
に、IT担当者が来てください。

おすすめ

転載: blog.csdn.net/qq_41880073/article/details/114974934