七种CSS选择器效果演示
一、核心选择器
1、标签选择器
显示效果为：
2.ID选择器
3.类选择器
显示效果为：
二、组合选择器
可对多个标签设置同一种样式，显示效果为：
三、通配选择器
因为通配选择器会到所有标签增添样式（包括<html>和body），因此开发中通常不使用，显示效果为：
四、伪类选择器
1、hover用于鼠标悬停时显示样式
显示效果为：
2、foucs用于元素获得焦点时显示样式效果
显示效果为：
五、关系选择器
1、包含选择器
显示效果为：
包含选择器与组合选择器共用：
显示效果为：
2、子选择器
子选择器与包含选择器的区别
要注意子选择器与包含选择器的区别：包含选择器是标签元素体内的所有标签（包括其子辈，孙辈，孙孙辈），而子选择器不包括其孙辈等。
显示效果为：
并不包含<span>中的<p>
而下面的包含选择器则包含<span>当中的 <p>
3.相邻选择器
格式：E F > G { 样式}
注意：（1）E,F必须是同一父级
（2）F毕竟紧贴在E之后，中间不能有其他标签
看下面的演示，首先不是同一父级：
![在这里插入图片描述](https://img-blog.****img.cn/2019031415301578.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx,size_16,color_FFFFFF,t_70
下面是不相邻：
六、兄弟选择器
格式：E~F { 样式}
显示效果为：
注意：
（1）是选择E之后的所有兄弟元素F
（2）E,F必须是同一父级
七、属性选择器
1、E[attr]
显示效果为：
2、E[attr=" "]
显示效果为：
3.E[attr~=" "] //选择包含指定单词的属性
显示效果为：
4、E[attr != " val "] //选择以val开头并以“-”分割的字符串的元素