常見的css選擇器包含：常用選擇器、基本選擇器、層級選擇器、偽類選擇器、屬性選擇器，其中常用選擇器分為：1.html選擇符*{}//給頁面上所有的標簽設置模式；2.類選擇符.hcls{}//給class是hcls的一類標簽設置模式；3.id選擇符#h3{}//給id是h3的標簽設置樣式；4.關聯選擇符#div h1、#div h1.ljhcls；5.div,h1,pmspan,button{}基本選擇器分為:first-child第一個、::first-letter第一個字母、::fist-line第一行、:last-child最后一個元素、:nth-child(n)第幾個元素，層級選擇器分為a,b組合、a b后代、a>b子代、a+b a的一個是b，偽類選擇器:hover鼠標經過、:focus焦點、::selection文字選中背景色，屬性選擇器[屬性]、[屬性=值]、[屬性~=值]//包含任意一個值、[屬性^=值]以什么開始、[屬性$=值]以什么結束。
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>學習css常用基本層級偽類屬性選擇器</title> 7 <style type="text/css"> 8 /*常用選擇器*/ 9 /*html選擇符*//* *{}給頁面上所有的標簽設置模式*/ 10 *{ 11 color: royalblue; 12 } 13 /*類選擇符*//*.hcls{}給class是hcls的一類標簽設置模式；*/ 14 .hcls{ 15 font-weight: bold; 16 } 17 /*id選擇符*//*#h3{}給id是h3的標簽設置樣式 */ 18 #h3{ 19 font-style: italic; 20 } 21 /*關聯選擇符 */ 22 div h1{ 23 font-size: 18px; 24 } 25 /*組合選擇符*/ 26 div,button{ 27 background-color: #ccc; 28 margin: 5px; 29 } 30 /*基本選擇器*/ 31 /*::first-letter */ 32 #h3::first-letter{ 33 font-size: 30px; 34 } 35 /*::first-line */ 36 .h4::first-line{ 37 color: red; 38 } 39 /*:first-child */ 40 .shuiguo li:first-child{ 41 color:#f90; 42 } 43 /*:last-child */ 44 .shuiguo li:last-child{ 45 text-decoration: line-through; 46 } 47 /*:nth-child(n) */ 48 .shuiguo li:nth-child(2){ 49 text-decoration: overline; 50 background-color: sienna; 51 } 52 /*層級選擇器*/ 53 /*a,b組合 */ 54 #h3,.box{ 55 background-color: #ccc; 56 margin: 5px; 57 } 58 /*a b a后代中的b */ 59 .h4 p{ 60 text-decoration: overline; 61 font-size: 30px; 62 } 63 /*a>b a的子元素b */ 64 div>p{ 65 font-style: italic; 66 } 67 /*a+b a后面的第一個元素b */ 68 div+span{ 69 height: 40px; 70 background-color: teal; 71 color: #fff; 72 } 73 /*偽類選擇器*/ 74 /*:hover*/ 75 input:hover{ 76 border-radius: 5px; 77 } 78 /*:focus焦點*/ 79 input:focus{ 80 outline-color: teal; 81 } 82 /*::selection文字選中背景色*/ 83 p::selection{ 84 color: #fff; 85 } 86 /* 屬性選擇器 */ 87 .shuiguo li[title]{ 88 font-size: 100px; 89 background-color: aqua; 90 } 91 /* 選擇器[屬性=值] 值唯一才可以用,包含多個值的測試不行*/ 92 .shuiguo li[title=pg]{ 93 color: red; 94 list-style: square; 95 background-color: #fff; 96 font-size: 60px!important; 97 } 98 /* 選擇器[屬性^=值]以什么開始 */ 99 .shuiguo li[title^=pg]{ 100 font-size: 20px; 101 margin: 20px; 102 } 103 /* 選擇器[屬性$=值]以什么結束 */ 104 .shuiguo li[title$=xj]{ 105 background-color: #ccc; 106 } 107 </style> 108 </head> 109 <body> 110 <div class="hcls" id="h3"> 111 <h1>html+css+javascript is very much!</h1> 112 </div> 113 <div class="hcls h4"><!--多個class用空格分開,id是唯一的--> 114 <p>If not for life, I can go to bed early and get up early;If not for life, I can go to bed early and get up early; 115 If not for life, I can go to bed early and get up early;If not for life, I can go to bed early and get up early; 116 If not for life, I can go to bed early and get up early</p><p>多個class用空格分開,id是唯一的</p> 117 <p>多個class用空格分開,id是唯一的</p> 118 </div> 119 <span>div后面的第一個元素</span> 120 <ul class="shuiguo"> 121 <li title="pg">蘋果</li> 122 <li title="xg pg">西瓜</li> 123 <li title="pg xj">香蕉</li> 124 </ul> 125 <button class="box">按鈕</button> 126 <form action=""> 127 <p>用戶名</p><input type="text" name="" id=""> 128 </form> 129 </body> 130 </html>