css 类选择哭

html代码：
 <ul>
  <li>1</li>
  <li id="bg-blue">2</li>
  <li class="bg-green">3</li>
 <li>4</li>
 <li>5</li>
 <li class="bg-green">6</li>
 <li>7</li>
 <li class="bg-green">8</li>
 <li>9</li>
 <!--  <li>10</li> -->
 </ul>

css代码:
/*标签选择器--------------------*/
ul{
 margin: 0;
 padding: 0;
 /*border: 1px solid green;*/
}
ul li{
 /*list-style-type: none;*/
 list-style: none;
 width: 80px;
 height: 80px;
 background-color: red;
 /*border: 1px solid green;*/
 text-align: center;
 line-height: 80px;
 border-radius: 50%; /*用相关值50%，可以自适应*/
 display: inline-block;/* 把块元素变成，行内元素*/

 box-shadow: 2px 2px 1px #888;
 /*float: left;*/
 
}
/*ID选择器----------------------*/
#bg-blue{
 background: blue;
}
/*类选择器-------------------------*/
.bg-green{
 background-color: green;
}

/*属性选择器-------------------*/
li[id="bg-blue"]{
 /*background-color: yellow;*/
 border:3px solid yellow;
}
/*群组选择器---------------------*/
#bg-blue, .bg-green{
 border:  5px solid pink;
}

/*相邻选择器，就只是下一个---------------*/
#bg-blue + *{
 background-color: yellow;
}
/*兄弟选择器，后面的li都算，平级-----------*/
#bg-blue ~ *{
 background-color: -yellow;
}
/*伪类选择器，子元素选择器------------------------------*/
/*这里ul 后面有一个空格*/
ul li:first-child{
 background-color: yellow;
}
ul li:last-child{
 background-color: pink;
}
ul li:nth-child(5){
 background-color: white;
}
ul li:nth-last-child(3){
 background-color: coral;
}

/*伪类中的 类型选择器  推荐使用-------------------*/

ul li:first-of-type{
 background-color: darkorange;
}
ul li:last-of-type{
 background-color: darkgreen;
}

ul li:nth-of-type(5){
 background-color: yellow;
 
}
/*它们的关注点不同，若是位置就用 nth-child(#)
 若是类型和位置同时关注就用 nth-of-type(#)
*/