常見的CSS3選擇器包含：常用基本、屬性、偽類、層級(jí)（組合）選擇器，具體使用情況建議先閱讀css選擇器四大類：基本、組合、屬性、偽類對(duì)于選擇器的使用有一個(gè)基本了解，選擇器的作用在于通過它找到元素，并且給它添加屬性樣式。
常用的選擇器有：標(biāo)簽、id、類、關(guān)聯(lián)（通過父集找到子集）組合選擇器，注意html頁面中id是唯一的；基本選擇器有（/*代表注釋*/），/*:first-child第一個(gè)元素*/，/*:last-child最后一個(gè)元素*/，/*:nth-child(n)第幾個(gè)元素*/，/*::first-line 第一行*/，/*::first-letter 第一個(gè)單詞/字符*/，然后層級(jí)選擇器有a b后代，a>b子元素，a+b后面的元素（相鄰選擇器），其次偽類選擇器有:hover，:focus焦點(diǎn)，::selection更改鼠標(biāo)選擇文本背景色，最后屬性選擇器（屬性選擇器的目的在于可以直接把標(biāo)簽身上的一種屬性拿來用）有基本選擇器[屬性]、基本選擇器[屬性=值]、 基本選擇器[屬性~=值]空格符隔開多個(gè)、 基本選擇器[屬性^=值]以什么開始、 基本選擇器[屬性$=值]以什么結(jié)束。（備注說明：教程是16年的，有些選擇器的名稱與現(xiàn)在的不是很一致，建議這里的基本選擇器還是按照偽類來記，有關(guān)css選擇器的四大分類以之前博文為主導(dǎo)，有不同地方歡迎留言評(píng)論，下面是一些有意思的的樣式，就寫出來展示了下）.
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 }/*第一個(gè)單詞/字符*/15 .box>li:first-child{16 list-style: square;17 }/*第一個(gè)元素*/18 .box>li:last-child{19 list-style: none;20 }/*最后一個(gè)元素*/21 .box>li:nth-child(3){22 list-style: lower-roman;23 }/*第n個(gè)元素*/24 div::selection{25 background-color: red;26 color: #FFF;27 }/*::selection更改鼠標(biāo)選擇文本背景色*/28 input{29 outline: none;30 }/*文本聚焦，更換默認(rèn)邊框顏色*/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 “盡信書不如無書下一句：吾于《武成》，取二三策而已矣。出自《孟子》的《盡心章句下》， “盡信書，則不如無書” 這是精辟透脫的讀書法，要求讀者善于獨(dú)立思考問題。”"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 焦點(diǎn):<input type="text">46 </form>47 </body>48 </html>
css3中"font"字體:/*font-family:字體類型*/，/*font-size:字體大小*/，/*font-style:itailc斜體*/，/*font-weight: 控制字體粗細(xì)大小*/，建議閱讀css常用樣式font控制字體的多種變換內(nèi)容介紹基本一致。
css3對(duì)文本樣式的處理常見的樣式有l(wèi)etter-spacing:字間距，word-spacing:詞間距，text-decoration:下劃線，text-align:文本對(duì)齊方式，text-indent：首航縮進(jìn)，line-height:行高，color：文本字體顏色，word-break:break-all文本折行。常說撞了南墻才回頭，現(xiàn)在如果文本中惡意輸入信息，比方都是這個(gè)單字母，怎么辦？你會(huì)發(fā)現(xiàn)它在瀏覽器中不自動(dòng)換行，而且出現(xiàn)底部滾動(dòng)條，這個(gè)html文檔展示一般從上至下，但是這個(gè)頁面這樣從左至右展示，怎么辦?解決辦法見div.box2，自行寫下，瀏覽器展示下，印象更深，當(dāng)然這種情況畢竟是少數(shù)，畢竟頁面的排版還是換行來的好看，F(xiàn)oreigner也不例外吧！
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 <!--默認(rèn)文本都是換行的-->16 <div class="box1">17 “盡信書不如無書下一句：吾于《武成》，取二三策而已矣。出自《孟子》的《盡心章句下》， “盡信書，則不如無書” 這是精辟透脫的讀書法，要求讀者善于獨(dú)立思考問題。”"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 <!--但是像這樣一些惡意輸入文本的,你會(huì)發(fā)現(xiàn)它在瀏覽器中不自動(dòng)換行，而且出現(xiàn)底部滾動(dòng)條，這個(gè)html文檔展示一般從上至下，但是這個(gè)頁面這樣從左至右展示，怎么辦?解決辦法見div.box2-->20 <div class="box2">21 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa22 </div>23 </body>24 </html>
聯(lián)系客服
