无序列表、有序列表、定义列表多样选择设置属性值

  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>