常見的CSS3選擇器包含：常用基本、屬性、偽類、層級（組合）選擇器，具體使用情況建議先閱讀css選擇器四大類：基本、組合、屬性、偽類對于選擇器的使用有一個基本了解，選擇器的作用在于通過它找到元素，并且給它添加屬性樣式，
常用的選擇器有：標簽、id、類、關聯（通過父集找到子集）組合選擇器，注意html頁面中id是唯一的；基本選擇器有（/*代表注釋*/），/*:first-child第一個元素*/，/*:last-child最后一個元素*/，/*:nth-child(n)第幾個元素*/，/*::first-line 第一行*/，/*::first-letter 第一個單詞/字符*/，然后層級選擇器有a b后代，a>b子元素，a+b后面的元素（相鄰選擇器），其次偽類選擇器有:hover，:focus焦點，::selection更改滑鼠選擇文本背景色，最后屬性選擇器（屬性選擇器的目的在于可以直接把標簽身上的一種屬性拿來用）有基本選擇器[屬性]、基本選擇器[屬性=值]、 基本選擇器[屬性~=值]空格符隔開多個、 基本選擇器[屬性^=值]以什么開始、 基本選擇器[屬性$=值]以什么結束，（備注說明：教程是16年的，有些選擇器的名稱與現在的不是很一致，建議這里的基本選擇器還是按照偽類來記，有關css選擇器的四大分類以之前博文為主導，有不同地方歡迎留言評論，下面是一些有意思的的樣式，就寫出來展示了下）.
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常用樣式font控制字體的多種變換內容介紹基本一致，
css3對文本樣式的處理常見的樣式有letter-spacing:字間距，word-spacing:詞間距，text-decoration:下劃線，text-align:文本對齊方式，text-indent：首航縮進，line-height:行高，color：文本字體顏色，word-break:break-all文本折行，常說撞了南墻才回頭，現在如果文本中惡意輸入資訊，比方都是這個單字母，怎么辦？你會發現它在瀏覽器中不自動換行，而且出現底部滾動條，這個html檔案展示一般從上至下，但是這個頁面這樣從左至右展示，怎么辦?解決辦法見div.box2，自行寫下，瀏覽器展示下，印象更深，當然這種情況畢竟是少數，畢竟頁面的排版還是換行來的好看，Foreigner也不例外吧！
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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/72070.html
標籤：Html/Css
上一篇：網頁的自適應設計與背景居中