选择器的用途：
由于我们用css修饰html内容需要指定到底修饰的哪一个部分，因此被引入了选择器的概念。选择器就是用来选择哪些html内容需要被哪种css语言修饰成什么什么样子。
选择器的分类：
由于选择方式的不同，css选择器被分为多种类型：基本选择器，组合选择器，属性选择器，伪元素选择器，伪类选择器。
一：基本选择器：
基本选择器又被分为：标签选择器，id选择器，类选择器，通用选择器。
1.标签选择器：
顾名思义，标签选择器就是通过控制标签的类型来修饰文件中所有使用该标签的内容，语法：标签名{属性：属性值}：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*在style标签下输入标签选择器*/ span {color:yellow} </style> </head> <body> <!--span标签内的内容全部变为黄色--> <span>yellow</span> <div>green</div> <span>lemon</span> </body> </html>
2.id选择器：
通过控制具有相同id值的标签，来修饰对应id值标签中的内容，语法：#id值 {属性：属性值}：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #a{color: yellow} </style> </head> <body> <!--id="a" 标签内的内容全部变为黄色--> <span id="a">yellow</span> <div id="a">green</div> <span >lemon</span> </body> </html>
3.类选择器：
类选择器通过控制具有相同类的标签，来修饰类中所有标签中的内容（类名不要用数字开头，有多个类需要用空格分开。），语法：.类名{属性：属性值}：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{color: red} </style> </head> <body> <!--div标签中，包括div中包含的span标签中的内容变成红色--> <div class="c1"> div中的内容。 <span>div中的span中的内容</span> </div> <span>div之外的内容</span> </body> </html>
4.通用选择器（较少使用）
修饰所有的内容，语法：*{属性：属性名}：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{color: green} </style> </head> <body> <!--所有的内容全部变为绿色--> 标签之外的内容 <div class="c1"> div中的内容。 <span>div中的span中的内容</span> </div> <p> <div>其他标签中的内容</div> </p> <span>div之外的内容</span> </body> </html>
二，组合选择器：
组合选择器又被分为：后代选择器，儿子选择器，毗邻选择器，弟弟选择器。
1.后代选择器：
所谓后代选择器就是修饰父类标签中指定的字类标签中的内容，语法：父类标签 字类标签{属性：属性值}：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div span{color:red} </style> </head> <body> <!--div标签中所有span标签中的内容都变成红色--> <div> <span>div下面的span</span> <ul> <li> <span>li下面的span</span> </li> </ul> </div> <!--div标签之外的span标签不被修饰--> <span>div外的span</span> <p>div外的段落文本</p> </body> </html>
2.儿子选择器：
儿子选择器只修饰其父类标签中指定的标签，也是就是指支持一层修饰，不修饰其字类标签中指定的标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div>span{color:red} </style> </head> <body> <div> <!--只有该span标签变为红色--> <span>div下面的span</span> <ul> <li> <!--该span标签不变色--> <span>li下面的span</span> </li> </ul> </div> <!--div标签之外的span标签不被修饰--> <span>div外的span</span> <p>div外的段落文本</p> </body> </html>
3.毗邻选择器：
修饰紧跟着指定标签之后的标签（对下不对上），语法：主标签+临近标签{属性：属性值}：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div+span{color:red} </style> </head> <body> <div> <span>div下面的span</span> <ul> <li> <span>li下面的span</span> </li> </ul> </div> <!--div标签之外的span标签变为红色--> <span>div外的span</span> <p>div外的段落文本</p> </body> </html>
4.弟弟选择器：
修饰主标签之外的其他同级副标签（对下不对上），语法：主标签~副标签{属性：属性值}：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div~p{color:deeppink} </style> </head> <body> <!--只修饰段落内容三，四--> <p>段落内容一</p> <div>div标签内容</div> <ul> <li> <p>段落内容二</p> </li> </ul> <p>段落内容三</p> <span>span标签内容</span> <p>段落内容四</p> </body> </html>
三 ，属性选择器：
通过指定属性名和属性值来修饰与其对应的标签的内容，
只要有属性名的标签都能找到，语法：[标签属性] {属性：属性值}：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> [name]{color: aqua} </style> </head> <body> <!--只要有属性名为name的标签都变色了--> <p name="hehe">段落文本一</p> <p>段落文本二</p> <div> <span name="lala">span内容</span> <p>段落文本三</p> </div> </body> </html>
需要明确指定属性名和属性值的标签，语法：[标签属性名：标签属性值] {属性名：属性值}：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> [name='hehe']{color: aqua} </style> </head> <body> <!--只有段落文本一变色--> <p name="hehe">段落文本一</p> <p>段落文本二</p> <div> <span name="lala">span内容</span> <p>段落文本三</p> </div> </body> </html>
四：分组与嵌套：
分组：
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一· 设置元素样式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*用逗号隔开不同的标签类型*/ div,ul{color: green} </style> </head> <body> <!--ul,和div标签下的内容变色--> <p>段落文本一</p> <p>段落文本二</p> <div> <span>span内容</span> <p>段落文本三</p> </div> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> </body> </html>
嵌套：
多种选择器也可以混合使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*选择c1类标签下的p标签*/ .c1 p {color: deeppink} </style> </head> <body> <!--段落文本二变色--> <p>段落文本一</p> <div class="c1">div内容 <p> 段落文本二 </p> </div> </body> </html>
五：伪类选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 未访问的链接 */ a:link {color: chartreuse} /* 已访问的链接 */ a:visited {color: red} /* 鼠标移动到链接上 */ a:hover {color: orange} /* 选定的链接 */ a:active{color: deeppink} /*input输入框获取焦点时样式*/ input:focus {outline:deeppink;background-color: yellow} </style> </head> <body> <a href="https://www.baidu.com/">百度</a> <a href="https://www.bilibili.com/">哔哩哔哩</a> <a href="https://www.sina.com.cn/">新浪</a> <a href="https://www.douyu.com/">斗鱼</a> <input type="text"> </body> </html>
六：伪元素选择器：
first-letter :用于给 首个字符做特殊样式，bofore：在标签内容前面添加字符，after：在标签内容后面添加字符（添加的特殊字符无法被选中。）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p:first-letter {font-size: 40px;color: deeppink} /*有了before之后first-letter就无效了*/ p:before{content: '@';color: chartreuse} p:after{content: '?';color: red} </style> </head> <body> <p>want are you doing</p> </body> </html>
七：研究选择器优先级
相同选择器，不同的引入方式。就近原则，谁越靠近标签谁说了算。
不同的选择器，相同的引入方式：
行类样式 > id选择器 > 类选择器 > 标签选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*第二优先级：id选择器*/ #a1 {color: yellow} /*第三优先级：类选择器*/ .b1 {color: chartreuse} /*第四优先级：标签选择器*/ p {color: purple} </style> </head> <body> <!--第一优先级：行类样式--> <p id="a1" class="b1" style="color: red">want are you doing</p> </body> </html>