Web实现：伪类列表伪类简单实例-CFANZ编程社区

Web实现：伪类列表伪类简单实例

效果图如下：
伪类列表
HTML部分代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <ul class="clearfix">
      <li></li>  
      <li></li>  
      <li></li>  
      <li></li>         <!--使用ul，li是为了考虑语义化的因素；列表伪类的适用条件是同一级别，相同元素。-->
      <li></li>  
    </ul>
</body>

</html>

CSS部分代码：

.clearfix::after{
  content: '';
  display: block;
  clear: both;
}
ul {
  margin: 0;
  padding: 8px 0px;
  width: 1174px;
  background: #FB5E1E;
  list-style: none;
}
ul>li {
  float: left;
  width: 226px;
  height: 80px;
  /* 给所有的li着色为相同颜色 */
  background: #9D24EC;
  border-radius: 10px;
  /* 统一为所有的色块设置右边距 */
  margin-right: 11px;
}
/* 使用伪类层叠掉不同颜色的色块 */
ul>li:nth-child(2) {
  background: #FB9526;
}
ul>li:nth-child(3) {
  background: #FE59CE;
}
ul>li:nth-child(4) {
  background: #4CC1FE;
}
ul>li:last-child {
  /* 最后一个元素不需要右边距，用伪类清除 */
  margin-right: 0px;
  background: #4BC74A;
}

0 条评论