CSS的选择符非常多，今天继续总结后面的选择符
1.id和class选择符
某些情况下我们用关系选择符或者伪类选择符无法选中一些元素时，我们可以给这些元素起
个名字或者分类，这就是id和class属性。
下面给出一个id为xxx，class为yyy的a链接：
<a href="" id="xxx" class="yyy">链接</a>
CSS代码：
#xxx{color: red} /*用#选择id（井号）*/
.yyy{text-decoration: none;} /*用.选择类（小数点）*/
**id是唯一的，而class可以重复，虽然这是软性规定
2.关系选择符
关系选中符又可以分为4类，强调父子和兄弟元素的运用
包含选择符：E F / 子选择符:E>F
为什么这两个要一起说？以为这两个选择符功能非常相似
包含选择符：选中E元素包含在内的一切F元素，包括子元素和子元素的子元素(所有后代)
子选择符：只选中E元素的子元素F，无法作用于子元素的子元素（仅儿子）
例如span包含div和a元素，div元素又包含a元素：
<span> <a>链接1</a> <div> <a>链接2</a> </div> </span>
当使用包含选择符时,链接1和链接2都会变成红色字体:
span a{color: red}
若使用子选择符，则只有链接1变成红色字体：
span>a{color:red}
相邻选择符：（E+F) /兄弟选择符（E~F）
相邻选择符：忽略E元素的一切子元素，选中紧跟在E元素下面的F元素(E和F是同级元素)
兄弟选择符：同样，选中E元素所在级的所有F元素(即E和F是同级元素)
例如，div包含a和p元素，外面跟着内容为a3的a元素：
<div> <a>a1</a> <a>a2</a> <p>p1</p> <p>p2</p> <p>p3</p> </div> <a>a3</a>
CSS代码:
div+a{color: green;} /*div里面的第一个a元素不受影响，同级元素a3变成绿色*/
a~p{color: red;} /*a元素的所有兄弟元素p变成红色（p1,p2,p3）*/
3.伪类选择符
E:link/E:visited/E:hover/E:active
这四个选择符关系紧密，旧版浏览器仅兼容超链接，而新版浏览器对hover没有太大限制
E:link为链接未激活的样式
E:visited为链接访问过的样式
E：hover为鼠标悬停的样式(不仅限于链接)
E:active为链接点击时的样式(鼠标按下，未松开的时候)
例如，下面给a链接定义未访问时为黑色且没下划线，访问后为蓝色，鼠标悬停为绿色，点击
时为红色的样式：
a:link{text-decoration: none;color: black;}
a:visited{color: blue;}
a:hover{color: green;}
a:active{color: red;}
E:first-of-type/E:last-of-type/E:nth-of-type(n)/E:nth-last-of-type(n)
我把它理解成兄弟队列选择，意思分别是选中第一个，选中最后一个，选中第N个，选中倒数
第N个
例如给出一个列表：
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
若要第一个li为加粗字体，最后一个为蓝色字体，第二和倒数第二个为红色字体，则CSS代码如下：
li:first-of-type{font-weight: bold;}
li:last-of-type{color: blue;}
li:nth-of-type(2){color: red;}
li:nth-last-of-type(2){color: red;}
拓展：E:only-of-type 选中另外一个唯一的同类E元素
E:empty
选中没有任何子元素包括文本的E元素
例如：
<div><a></a></div> <div>23</div> <div></div>
CSS:
div:empty{border: 1px solid green;}
效果：只是第三个div加了边框效果
