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(#)
*/
