关于CSS选择器总结：（注：下面标签间出现的类名或ID名可以随意取，对标签不熟悉的可以先去学学html标签，推荐网址：www.w3school.com.cn）
1.标签选择器：
直接找到标签名字的选择器
语法：标签名{} 如：p{}
2.类名选择器（类名在同一个页面可以出现多次）：
通过类名找到对应的标签
语法：.类名{}
如:<p class="first"></p> .first{}
3.ID名选择器（ID名在同一个页面只能出现一次）
通过ID名找到对应的标签
语法：#ID名{}
如：<p id="first"></p> #first{}
4.后代选择器
不用逗号隔开（包括标签名、类名、ID名等等）后面选择器为前面的子级元素
如：<div>
<p id=''first">
<p class="box">
</p>
</p>
</div>
语法：div #first .box{}或者div p p{}或者div #first p{}或者div p .box{}
5.群组选择器
用逗号隔开，选择器之间可以为同级关系，也可以为父子级关系
如：<div></div>
<p class="box"></p>
<span id="first"></span>
语法：div,p,span{}或者div,#box,.first{}或者div,#box,span{}或者div,p,.first{}
6.通配符选择器
无论什么元素全部选到，用符号" * "表示
语法：*{margin:0;padding:0;}(通配符固定语句)
一个网页中最好不用使用" * "选择器，因为它是默认给页面中所有标签都强制加外边距和内边距都为零，如果是大型网站像天猫、淘宝，这类的很消耗网站性能，所以通常在写网页时是给一些默认带有外边距和内边距标签清零。
如：body,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ol,ul,input{margin:0;padding:0;}
7.子级选择器
用于具有父子级关系的元素，而且是直接的下一级关系，不是所有后代
如：<div>
<p>
<p></p>
</p>
<p></p>
</div>
语法：div > p{}(注：选择的是div里的两个子级p元素，而不会选择p标签里嵌套的p标签)
8.毗邻选择器
用于兄弟(同级)元素之间
如：<div>
<div></div>
<div></div>
<div></div>
</div>
语法：div div+div{}(注：在同级元素中，除了第一个div,其他div都选中)
9.属性选择器
语法：[属性]{}
如：<a href=""></a>
[href]{}
10.属性属性值选择器
语法：[属性=属性值]{}
如：<a href="" class="item"></a> [class=item]{}
(注：属性与属性值必须一致，不能出现两个属性值 [如：class="item item1"]这是不可以的)
11.属性包含属性值选择器
语法：[属性~=属性值]{}
如：<a href="" class="item"></a> [class~=item]{}(注：可以出现两个属性值)
12.属性属性值开头选择器
语法：[属性|=属性值]{}
如：<a href="" class="font-text"></a>[class|=font]{}或[class|=font-text]{}两种情况可以
(注：当class="font"时 [class|=font]{}也可以)
13.伪类选择器
选择器满足某些条件
:link 未被点击的状态（a标签适用）
如：a:link{color:red;}设置未被点击时字体颜色为红色
:active 点击但是鼠标没有释放的状态
如：a:active{color:green;}设置未被点击时字体颜色为绿色
:hover 鼠标悬停的状态（任何标签都可以使用也是最常用的）
如：a:hover{color:pink;}设置未被点击时字体颜色为粉色
:visited 点击过后的状态（a标签适用）
如：a:hover{color:yellow;}设置点击过后字体颜色为黄色
（注：伪类选择器最好分开测试，效果比较明显）
上面是自己对CSS选择器的总结，并需要都记住，比较常用的是前面8个选择器，后面的很少用，但最好了解下。
在CSS3里还有很常用的子元素序列选择器有兴趣的可以了解下，欢迎大家在评论区探讨
(希望对大家有所帮助，觉得我哪里错了可以给些建议，谢谢啦~~)
