一般的なCSS3セレクターには、一般的に使用される基本、属性、疑似クラス、階層（組み合わせ）セレクターが含まれます。特定の使用法については、セレクターの使用について[Cssセレクター4つのカテゴリー：基本、組み合わせ、属性、疑似クラス]を読むことをお勧めしますセレクターの役割はそれを通して要素を見つけ、それに属性スタイルを追加することであるという基本的な理解があります。
一般的に使用されるセレクターは、タグ、ID、クラス、関連付け（親セットからサブセットを検索するため）の組み合わせセレクターです。HTMLページのIDは一意であることに注意してください。基本セレクターには（/*代表注释*/），/*:first-child第一个元素*/，/*:last-child最后一个元素*/，/*:nth-child(n)いくつかの要素/、/があります。最初の行/、/：最初の文字最初の単語/文字* /、そして階層セレクターにはab、a> bサブ要素の子孫、a + bの後ろの要素（隣接するセレクター）、それに続いて擬似クラスセレクターには、ホバー、フォーカスフォーカス、::マウスの選択テキストの背景色を変更する選択があり、最後に属性セレクター（属性セレクターの目的は、ラベルの属性を直接使用することです）に基本セレクターがあります[属性]、基本セレクター[属性=値]、基本セレクター[属性〜=値]複数のスペースで区切られたスペース文字、基本セレクター[属性^ =値]で始まり、基本セレクター[属性$ =値]で始まる何が終わる。（備考：このチュートリアルは16年前のものであり、一部のセレクターの名前は現在のセレクターとあまり一致していません。疑似クラスに従って、ここでの基本的なセレクターを覚えておくことをお勧めします。CSSセレクターの4つの主要なカテゴリーは、以前のブログ投稿で占められています。メッセージやコメントは、さまざまな場所で歓迎されています。以下に、いくつかの興味深いスタイルを示します。
专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS3选择器和文本字体样式</title>
7 <style type="text/css">
8 div::first-line{
9 color: #f90;
10 }/*第一行*/
11 div::first-letter{
12 font-style: italic;
13 font-size: 24px;
14 }/*第一个单词/字符*/
15 .box>li:first-child{
16 list-style: square;
17 }/*第一个元素*/
18 .box>li:last-child{
19 list-style: none;
20 }/*最后一个元素*/
21 .box>li:nth-child(3){
22 list-style: lower-roman;
23 }/*第n个元素*/
24 div::selection{
25 background-color: red;
26 color: #FFF;
27 }/*::selection更改鼠标选择文本背景色*/
28 input{
29 outline: none;
30 }/*文本聚焦，更换默认边框颜色*/
31 </style>
32 </head>
33 <body>
34 <ul class="box">
35 <li>1</li>
36 <li>2</li>
37 <li>3</li>
38 <li>4</li>
39 <li>5</li>
40 </ul>
41 <div>
42 “尽信书不如无书下一句：吾于《武成》，取二三策而已矣。出自《孟子》的《尽心章句下》， “尽信书，则不如无书” 这是精辟透脱的读书法，要求读者善于独立思考问题。”"It is better to write a letter without a book than the next sentence: I am in" Wu Cheng "and take two or three strategies.It is from the Mencius" Below the Heart Chapter "," It is better to have a letter than a book. " Readership requires readers to think independently. "
43 </div>
44 <form action="" method="get">
45 焦点:<input type="text">
46 </form>
47 </body>
48 </html>
css3の "font"フォント：/ font-family：フォントタイプ /、/ font-size：フォントサイズ /、/ font-style：itailcイタリック /、/ font-weight：フォントの太さを制御 // 推奨する読み取り[cssスタイルフォントは、さまざまなフォント変換を制御します]コンテンツの概要は基本的に同じです。
css3のテキストスタイルの一般的なスタイルは、文字間隔：単語間隔、単語間隔：単語間隔、テキスト装飾：下線、テキスト配置：テキスト配置、テキスト配置：最初のフライトインデント、行高さです。 ：行の高さ、色：テキストのフォントの色、改行：すべてのテキストを改行します。南壁にぶつかって戻る前によく言われるのですが、例えば文章中に悪意を持って情報が入力された場合、この一文字だとどうなりますか？ブラウザーで自動的に折り返されないことがわかり、下部のスクロールバーがあります。このHTMLドキュメントは上から下に表示されますが、このページは左から右に表示されます。どうすればよいですか？div.box2の解決策を参照して、自分で記述してくださいブラウザの表示では印象が深まりますが、もちろんこれは数少ない状況ですが、やはりページのレイアウトは綺麗ですが、外国人も例外ではありません！
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>有意思的word-break:break-all文本折行</title>
7 <style type="text/css">
8 div.box2{
9 word-break: break-all;
10 overflow: auto;
11 }/*word-break:break-all文本折行*/
12 </style>
13 </head>
14 <body>
15 <!--默认文本都是换行的-->
16 <div class="box1">
17 “尽信书不如无书下一句：吾于《武成》，取二三策而已矣。出自《孟子》的《尽心章句下》， “尽信书，则不如无书” 这是精辟透脱的读书法，要求读者善于独立思考问题。”"It is better to write a letter without a book than the next sentence: I am in" Wu Cheng "and take two or three strategies. It is from the Mencius" Below the Heart Chapter "," It is better to have a letter than a book. " Readership requires readers to think independently.
18 </div>
19 <!--但是像这样一些恶意输入文本的,你会发现它在浏览器中不自动换行，而且出现底部滚动条，这个html文档展示一般从上至下，但是这个页面这样从左至右展示，怎么办?解决办法见div.box2-->
20 <div class="box2">
21 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
22 </div>
23 </body>
24 </html>