1 <!DOCTYPE html> 2 3 <html lang="en"> 4 5 <head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 9 <title>Document</title> 10 <!-- /*内联样式*/ --> 11 <style> 12 ul{ 13 300px; 14 height: 500px; 15 margin: auto; 16 } 17 ul>li{ 18 100%; 19 height:50px; 20 outline: 1px solid black; 21 } 22 /* //去掉前面的符号 */ 23 /* //给列表前面添加罗马数字 */ 24 ul>li { 25 26 list-style: none; 27 28 /* list-style: lower-roman; */ 29 30 } 31 32 /* //选择列表中的第四项 */ 33 34 /* ul>li:nth-child(4) { 35 background-color: red; 36 } */ 37 38 /* //选择列表中的最后一项 */ 39 40 /* ul>li:last-child { 41 background-color: red; 42 } */ 43 44 /* //选择列表的奇数 */ 45 46 /* ul>li:nth-child(odd) { 47 background-color: red; 48 } */ 49 50 /* //选择列表中的双数 */ 51 52 /* ul>li:nth-child(even) { 53 background-color: orange; 54 } */ 55 56 /* //选择中间间隔两个列表 */ 57 58 /* ul>li:nth-child(3n+1) { 59 background-color: red; 60 } */ 61 62 /* //除了最后一个其他的全部选择 */ 63 64 ul>li:not(:last-child) { 65 background-color: red; 66 } 67 68 /* //选择列表的前三个列表 */ 69 70 /* ul>li:nth-child(-n+3) { 71 background-color: red; 72 } */ 73 74 /* //选择列表的第三个 */ 75 76 /* ul>li:nth-child(3) { 77 background: #ff0000; 78 } */ 79 </style> 80 81 </head> 82 83 <body> 84 <!-- 无序列表： --> 85 <ul> 86 <li></li> 87 <li></li> 88 <li></li> 89 <li></li> 90 <li></li> 91 <li></li> 92 <li></li> 93 <li></li> 94 <li></li> 95 <li></li> 96 </ul> 97 <!-- 有序列表： --> 98 <!-- <ol> 99 <li></li> 100 <li></li> 101 </ol> --> 102 <!-- 定义列表： --> 103 <!-- <dl> 104 <dt> 105 <dd></dd> 106 <dd></dd> 107 </dt> 108 </dl> --> 109 </body> 110 111 </html>
