CSS3 关系选择器 演示 

 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>

 

posted @ 2019-01-11 11:04  Gosun  阅读(562)  评论(0)    收藏  举报