一、选择器
选择器是我们用来准确定位标签，并对选中的标签进行样式改修。
二、常用选择器
1.基本选择器（id选择器，class选择器，标签选择器）；
2.后代选择器和子代选择器；
3.兄弟选择器和相邻选择器；
4.全选择器，属性选择器和分组选择器；
5.伪类选择器
三、选择器
1.基本选择器
class选择器：通过标签的 class 属性 ，选择对应的元素 借助了一个类的概念，一处定义，可以多处使用；
id选择器：通过标签的 id 属性，选择 对应的元素，id选择器具有唯一性；
标签选择器：通过标签来选择对应的元素；
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css的选择器</title> <style> /*基本选择器之标签选择器*/ p{ color:red; } /*基本选择器之class选择器*/ .test1{ font-size: 100px; } /*基本选择器之id选择器*/ #test2{ font-family: "Adobe 宋体 Std L"; } </style> </head> <body> <!--基本选择器：标签选择器，class选择器，id选择器--> <p>我就是我</p> <p class="test1">我就是我</p> <p id="test2">我就是我</p> </body> </html>
2.后代选择器和子代选择器
<div class="box1"> <span>鹅鹅鹅</span> <p>曲<span>项</span>向天歌</p> </div>
div下面的span标签和p标签都是div标签的后代标签，p标签内的span标签是p的子代标签，p标签与和p标签同级的span标签都是div标签的子代标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后代选择器和子代选择器</title> <style> /*子代选择器*/ .box1>span{ color:deepskyblue; } /*后代选择器:代表div后面所有的span标签*/ .box1 span{ font-size:40px; } </style> </head> <body> <!--后代选择器和子代选择器--> <div class="box1"> <span>鹅鹅鹅</span> <p>曲<span>项</span>向天歌</p> </div> </body> </html>
3.兄弟选择器和相邻选择器
<body>
<!--相对于div标签，第一个p标签好比它的哥哥，后面的两个p标签好比弟弟-->
<p>我就是我，不一样的烟火</p>
<div class="box2"></div>
<p>白毛浮绿水</p>
<p>红掌拨清波</p>
</body>
div标签和几个p标签为同级标签，他们就好像兄弟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>兄弟选择器和相邻选择器</title> <style> /*兄弟选择器*/ /*兄弟选择器只能选择到对象后面的标签*/ .box2~p { color: blue; } /*相邻选择器*/ /*作用于紧挨着对象的标签*/ .box2+p{ font-size: 100px; } </style> </head> <body> <!--相对于div标签，第一个p标签好比它的哥哥，后面的两个p标签好比弟弟--> <p>我就是我，不一样的烟火</p> <div class="box2"></div> <p>白毛浮绿水</p> <p>红掌拨清波</p> </body> </html>
4.全选择器，属性选择器和分组选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>其他选择器</title> <style> /*全选择器*/ *{ font-family:华文彩云； } /*属性选择器*/ /*一般用在非class和id属性，当我们属性不够用了，我们自己自定义属性，同样操作标签*/ div[hh="test4"]{ font-family:Simplex; } div[class="test3"]{ color:peru; } /*分组选择器*/ /*.box5{*/ /*height:200px;*/ /*200px;*/ /*background:royalblue ;*/ /*}*/ /*.box6{*/ /*height:200px;*/ /*200px;*/ /*background:royalblue ;*/ /*}*/ .box5.box6{ height:200px; 200px; background:royalblue ; } </style> </head> <body> <!--全选择器--> <p>我就是我</p> <span>我就是我</span> <div>我就是我</div> <h1>我就是我</h1> <!--属性选择器--> <div class="test3" hh="test4"></div> <!--分组选择器 分组选择器当我们有多个标签且有同一个样式的时候，可以使用--> <!--这样减少了代码的冗余--> <div class="box5"></div> <p class="box6"></p> </body> </html>
5.伪类选择器
未访问的样式：link； 访问过后的样式：visited；
划过的样式：hover; 激活的样式：active;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /*未访问link 标签名：link */ a:link{ color:deepskyblue; } /*当鼠标划过标签或者标签的区域内显现出来的样式*/ a:hover{ color:red; } /*访问后的*/ a:visited{ color:seashell; } /*激活的*/ a:visited{ font-size:60px; color:yellow; } div{ height:200px; 200px; background:steelblue; } div:hover{ color:gray; } </style> </head> <body> <a href="">我是一个a标签</a> <div>我是div标签</div> </body> </html>