css选择器放在样式表当中，选择器就是用来选择html中的标签，选择出来以后用来给标签添加样式，选择器有如下6种，经常使用的也就类选择和层级选择器
根据标签来选择标签，以标签开头，会影响html当中所有的标签，一般用来做一些通用设置，如下定义会将所有的li标签颜色定义为绿色
<style> li{ color: chartreuse; } </style>根据类名选择标签，以.类选择器名字开头，使用时用“class=类选择器名字”引入 如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>类选择器</title> <style> .a{ background: crimson; font-size: 10px; } .b{ background: blue; font-size: 15px; } .c{ background: gold; font-size: 20px; } </style> </head> <body> <p class="a">我是一个p标签，我引入的是a样式</p> <p class="b">我是一个p标签，我引入的是b样式</p> <p class="c">我是一个p标签，我引入的是c样式</p> </body> </html>执行结果： 1个标签可以用于多个类选择器，1个类选择器也可以应用于多个标签，多个类选择器之间使用空格分割，应用灵活，可复用，是目前程序猿小哥哥们使用最多的一种选择器，如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>类选择器</title> <style> .bgcoral{ background: coral; } .bgblue{ background: blue; } .size20px{ font-size: 20px; } .size30px{ font-size: 30px; } </style> </head> <body> <p class="bgcoral size20px">我是一个p标签</p> <p class="bgblue size30px">我是一个p标签</p> <p class="bgcoral size30px">我是一个p标签</p> </body> </html>执行结果：
也叫后代选择器，根据层级关系选择后代标签，应用于标签嵌套结构，用来选择子标签，选择器之间使用空格分隔，如下段代码，给div标签下面的p标签添加样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>层级选择器</title> <style> div p{ color: red; } </style> </head> <body> <div> <p>你好，层级选择器</p> <p>我也满足层级关系的，哼哼！！！</p> <p> <p>我是div的孙子辈p标签，我爹也是p标签</p> <h1>我的爷爷也是div标签，p标签是我亲爹，但我是h1标签，呜呜...</h1> </p> <h1> <p>我的爷爷是div标签，但我爹是h1标签</p> </h1> </div> <p>我不满足上面的层级关系，呜呜呜...</p> </body> </html>执行结果： 从上面的结果可以看出，满足层级关系的div下面所有的子p标签都被添加样式，不仅仅局限于父子关系，子孙关系也是可以的，只要是后代关系就行 层级选择器不仅仅用于两个标签之前，比如我要给上面的第二个p标签换一种样式，不想他和其他样式一致，就可以使用层级选择器结合类选择器 如：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>层级选择器</title> <style> div p{ color: red; } div .p{ color: seagreen; font-size: 30px; } </style> </head> <body> <div> <p>你好，层级选择器</p> <p class="p">我的样式是独一无二的，哼哼！！！</p> <p> <p>我是div的孙子辈p标签，我爹也是p标签</p> <h1>我的爷爷也是div标签，p标签是我亲爹，但我是h1标签，呜呜...</h1> </p> <h1> <p>我的爷爷是div标签，但我爹是h1标签</p> </h1> </div> <p>我不满足上面的层级关系，呜呜呜...</p> </body> </html>执行结果：
以#开头，id是用来区分html网页中的不同标签，id是唯一的，不能重复，所以id选择器只能被某一个元素使用，不能被其他元素再次使用，使用效率太低，目前基本没有人用 如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>id选择器</title> <style> #myidtest1{ background:yellowgreen; font-weight: 5; } </style> </head> <body> <p id="myidtest1">我用的是id选择器</p> </body> </html>执行结果：
顾名思义也就是多个选择器的一个组合，以逗号分割开, 用于设置公共的样式，可以大大提高代码书写效率，其他特定的样式可以单独定义，样式会进行追加，不会覆盖，与python当中稍微不太一样，如下面的a类选择器，只要掌握了其他几种，组选择器会显得特别简单 如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>id选择器</title> <style> .a,.b,.c,a{ color: seagreen; font-size: 20px; } .b{ background: orangered; } </style> </head> <body> <p>我用的是组选择器</p> <form action=""> <label for="" class="b">用户名：</label> <input type="text"> </form> </body> </html>执行结果：
用来给其他选择器增加特殊效果，选择器后面加+：+伪类名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>id选择器</title> <style> .b{ color:seagreen; font-size: 20px; background: orangered; } /* hover用于选择鼠标指针悬停时的元素，下面设置对应鼠标悬停后的样式*/ .b:hover{ color:sienna; font-size: 50px; background:slateblue; } </style> </head> <body> <p class="b">我来玩玩伪类选择器</p> </body> </html>执行结果： 鼠标在上面悬停后的结果： 以上仅适用于刚入门的小白，如有问题，欢迎随时指教，不胜感激！！！
