- 選擇器
作用：選擇頁面上某一個或某一類元素
-
基本選擇器：
-
標籤選擇器 選擇一類標籤，標籤{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標籤選擇器</title> <style type="text/css"> /*標籤選擇器，會選擇頁面上所有 這個標籤的元素 color顏色 background背景顏色 border-radius圓角邊框 font-size字體大小 */ h1{ color: red; background: yellow; border-radius: 50px; } p{ font-size: 80px; } </style> </head> <body> <h1>你好</h1> <h1>世界</h1> <p>Hello</p> </body> </html> -
class 類選擇器 選擇所有class屬性一致的標籤，.class名稱{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>類選擇器</title> <style> /*類選擇器格式： .class的名稱{} 類選擇器的優點，可以多個標籤歸類， 使用同一個class，可以實現複用 */ .one{ color: red; } .two{ color: #3b7580; } </style> </head> <body> <!--在標籤裏寫上class屬性--> <h1 class="one">標題一</h1> <h1 class="two">標題二</h1> <h1 class="one">標題三</h1> </body> </html> -
id 選擇器 id全局唯一，#id名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>id選擇器</title> <style> /*id選擇器格式： #id名稱{} id必須保證全局唯一 */ #one{ color: #80351c; } .two{ color: #8bbb2b; } h1{ color: #bb7639; } </style> </head> <body> <h1 id="one" class="two">標題1</h1> <h1 class="two">標題2</h1> <h1 class="two">標題3</h1> <h1>標題4</h1> <h1>標題5</h1> </body> </html>經過對比可以發現，選擇器的優先級不是遵循就近原則的，而是固定的
id選擇器 > class選擇器 > 標籤選擇器
-
-
層次選擇器：
-
後代選擇器： 在某一個元素後面
/*後代選擇器,格式：元素+空格+標籤*/ body p{ background: red; } -
子選擇器： 僅後一代
/*子選擇器，格式：元素+>+標籤*/ body>p{ background: aqua; } -
相鄰選擇器：
/*相鄰選擇器，格式：.class名 + 標籤，只有一個，向下*/ .active + p{ background: #80351c; }
-
結構僞類選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>結構僞類選擇器</title> <style> /*ul的第一個子元素*/ ul li:first-child{ background: #8bbb2b; } /*ul的最後一個子元素*/ ul li:last-child{ background: aqua; } /*a標籤懸停背景顏色*/ a:hover{ background: aqua; } </style> </head> <body> <a href="https://www.baidu.com">百度</a> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul> </body> </html>