前端 CSS的選擇器 基本選擇器
阿新 • • 發佈：2019-05-01
pre inf sca mil logs blog port 就是 分享
基本選擇器包括：
- 標簽選擇器
- 類選擇器
- ID選擇器
- 通用選擇器
標簽選擇器
就是通過標簽名來選擇元素：
選中p標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> /* 標簽選擇器 */ p{ color: red; } </style> </head> <body> <div> <p>我是一個段落</p> </div> </body> </html>
將所有的p標簽設置字體顏色為紅色
標簽選擇器可以選中所有的標簽元素，例如div,ul,li,p等，不管標簽藏的多深，都可以選中，選中的是所有,而不是某一個
ID選擇器
id是在每個標簽應用是唯一的
同一個頁面id不能重復
id命名規範 要以字母開頭 可以有數字、下劃線、-
大小寫嚴格區分 aa和AA
通過元素的ID值選擇元素：
用#選中id
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible"content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> #s1{ color: red; } </style> </head> <body> <div> <span id="s1">123</span> </div> </body> </html>
將id值為s1的元素字體顏色設置為紅色。
CSS使用的id 他的大小寫字母是嚴格區分的，id是唯一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> #s1{ color: red; } #s2{ font-size:30px; } </style> </head> <body> <div> <span id="s1">123</span> <span id="s2">helo</span> </div> </body> </html>
類選擇器
通用選擇器
使用*選擇所有元素：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> *{ color: red; } </style> </head> <body> <div> <p>第一個段落</p> <span>span</span> </div> <div> <a>a標簽</a> </div> </body> </html>
前端 CSS的選擇器 基本選擇器