1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>css3</title>
5 <style type="text/css">
6 *{
7 box-sizing:border-box;
8 }
9 ul{
10 width:100%;
11 margin:0;
12 padding:0;
13 font-size: 0;
14 }
15 li{
16 margin:0;
17 padding:0;
18 display:inline-block;
19 vertical-align: top;
20 font-size: 13px;
21 border:1px solid red;
22 height:30px;
23 }
24 /*ul只有一个子元素的样式*/
25 li:nth-last-child(1):first-child{
26 width:100%;
27 }
28
29 /*ul有2个子元素的样式*/
30 /*li:nth-last-child(2):first-child, 是倒数第二个元素，又是第一个元素，说明li的父元素ul有2个子元素（起到了 判断某父元素下有几个子元素 的作用）*/
31 li:nth-last-child(2):first-child,
32 /* ~ 选择位于li:nth-last-child(2):first-child 即 第一个子元素之后的元素*/
33 li:nth-last-child(2):first-child ~ li{
34 width:calc(100% / 2);
35 }
36
37 /*ul有3个子元素的样式*/
38 /*第一个元素宽度为1/3，字体颜色为蓝色*/
39 li:nth-last-child(3):first-child{
40 width:calc(100% / 3);
41 color:blue;
42 }
43 /*第一个元素之后的第一个元素（即 有3个子元素的ul 的 第 3 个元素）*/
44 li:nth-last-child(3):first-child ~ li:nth-last-child(1){
45 width:calc(100% / 4);
46 color:red;
47 }
48 /*第一个元素之后的第一个元素（即 有3个子元素的ul 的 第 2 个元素）*/
49 li:nth-last-child(3):first-child ~ li:nth-last-child(2){
50 width:calc(100% / 6);
51 color:yellow;
52 }
53 </style>
54 </head>
55 <body>
56 <ul class="list">
57 <li>11111</li>
58 </ul>
59 <ul class="list">
60 <li>11111</li>
61 <li>22222</li>
62 </ul>
63 <ul class="list">
64 <li>11111</li>
65 <li>22222</li>
66 <li>33333</li>
67 </ul>
68 </body>
69 </html>
