1.標簽選擇器：選擇一類標簽
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2021-11-19</title> <style type="text/css"> /*標簽選擇器會選擇到也面上的所有標簽*/ h1 { color: #0000FF; background: #7CFC00; /*邊框圓角*/ border-radius: 24px; } p{ /*字體大小*/ font-size: 100px; } </style> </head> <body> /*標簽選擇器的弊端：如果只想讓第一個h1變色，第二個不變色，標簽選擇器是做不到的*/ <h1>學JAVA</h1> <h1>學JAVA</h1> <p>學CSS</p> </body> </html>
2.類選擇器 class：選擇所有class屬性一致的標簽，跨標簽
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2021-11-19</title> </head> <style type="text/css"> /*類選擇器的格式：.class的名稱｛｝ 1.好初：可以多個標簽歸類，是同一個class，可以復用 */ .first{ color: #0000FF; } .second{ color: #7CFC00; } .third{ color: #ED4358; } </style> <body> <h1 class="first">A</h1> <h1 class="second">B</h1> <h1 class="third">C</h1> <h1 class="first">D</h1> </body> </html>
3.Id選擇器：全局唯一！！！
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2021-11-19</title> </head> <style type="text/css"> /*ID選擇器的一個格式 #id名稱｛｝ id必須保證全局唯一 1.不遵循就近原則，固定的，id選擇器 > class選擇器 > 標簽選擇器 */ #first{ color: #0000FF; } .second{ color: #FFFFFF; } h1{ color: #6C6C6C; } </style> <body> <h1 id="first">A</h1> <h1 class="second">B</h1> <h1 id="third">C</h1> <h1 id="five">D</h1> </body> </html>