欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  代码如下:
 
  
 
  
 
  <!DOCTYPEhtml>
 
  <htmlxmlns="http://www.w3.org/1999/xhtml">
 
  <head>
 
  <title>CSS3结构伪类选择器</title>
 
  <styletype="text/css">
 
  *{padding:0;margin:0;}
 
  ul
 
  {
 
  display:inline-block;
 
  width:200px;
 
  list-style-type:none;
 
  }
 
  ulli
 
  {
 
  height:20px;
 
  }
 
  ulli:first-child{background-color:red;}
 
  ulli:nth-child(2){background-color:orange;}
 
  ulli:nth-child(3){background-color:yellow;}
 
  ulli:nth-child(4){background-color:green;}
 
  ulli:last-child{background-color:blue;}
 
  </style>
 
  </head>
 
  <body>
 
  <ul>
 
  <li></li>
 
  <li></li>
 
  <li></li>
 
  <li></li>
 
  <li></li>
 
  </ul>
 
  </body>
 
  </html>

微信图片_20181119095420.png



本文转载自中文网

 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c56576.shtml