常見的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文字選中背景色，屬性選擇器[屬性]、[屬性=值]、[屬性~=值]//包含任意一個值、[屬性^=值]以什麼開始、[屬性$=值]以什麼結束。
專門建立的學習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>學習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>