1.元素选择器
元素选择器，就是选中相同的元素，然后对相同的元素定义同一个CSS样式
实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CTF</title> <style type="text/css"> div { color: blue; } </style> </head> <body> <div>我的</div> <div>演示元素选择器</div> </body> </html>
2.id选择器
我们可以为元素设置一个id属性，然后针对设置了这个id的元素定义CSS样式，这就是id选择器。但要注意，在同一个页面中，是不允许出现两个相同的id的。这个与“没有两个人的身份证号相同”是一样的道理
对于id选择器，id名前面必须要加上前缀“#”
演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CTF</title> <style type="text/css"> #my { color: blue; } </style> </head> <body> <div>我的</div> <div id="my">演示id选择器</div> </body> </html>
3.class选择器
class选择器，也就是“类选择器”。我们可以对“相同的元素”或者“不同的元素”定义相同的class属性，然后针对拥有同一个class的元素进行CSS样式操作
class名前面必须要加上前缀英文句号（.）
演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CTF</title> <style type="text/css"> .my { color: blue; } </style> </head> <body> <div class="my">我的</div> <div class="my">演示class选择器</div> </body> </html>
4.后代选择器
后代选择器，就是选择元素内部中某一种元素的所有元素：包括子元素和其他后代元素
演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CTF</title> <style type="text/css"> #my span { color: blue; } </style> </head> <body> <div id="my"> <div> 我不会变色 </div> <span> 我会变色 </span> </div> </body> </html>
#my span {color:blue;}表示选择“id为my的元素”下的所有span元素
5.群组选择器
群组选择器，指的是同时对几个选择器进行相同的操作
对于群组选择器，两个选择器之间必须要用英文逗号（,）隔开
实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CTF</title> <style type="text/css"> div,span,p { color: blue; } </style> </head> <body> <div>hello</div> <span>hello</span> <p>hello</p> </body> </html>
