基本选择器包括：
- 标签选择器
- 类选择器
- 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>
