<style>
/*
符号： 冒号
结构伪类： 通过结构来进行筛选
*/
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 520px;
height:auto;
margin:100px auto;
}
li{
float: left;
width: 70px;
height: 70px;
border: 1px solid #CCC;
text-align: center;
line-height: 70px;
margin-left:-1px;
margin-top:-1px;
}
/* 先找父元素 在里面指定的 那个标签*/
/* 选中第一个*/
li:first-child{
background-color: pink;
}
/*/!* 选中最后一个*!/*/
li:last-child{
background-color: pink;
}
/*/!* 注意 编号从1开始 *!/*/
li:nth-child(11){
background-color: pink;
}
/*/!* 奇数*!/*/
li:nth-child(odd){
background-color: pink;
}
/*/!*偶数*!/*/
li:nth-child(even){
background-color: #eee;
}
/* n表示 0,1,2,3,4,5,6,7,8.....
当n小于1是无效
*/
/*/!*偶数*!/*/
li:nth-child(2n){
background-color: red;
}
/*/!*奇数*!/*/
li:nth-child(2n+1){
background-color: red;
}
/*选中前5个*/
li:nth-child(-n+5){
background-color: pink;
}
/* 选中后5个*/
li:nth-last-child(-n+5){
background-color: pink;
}
/* 选中7的倍数*/
li:nth-child(7n){
background-color: green;
｝
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
</ul>
</body>
结构伪类
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
