伪类选择器

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构伪类选择器:不分组(不区分元素类型)</title>
</head>
<style>
   .box{
       width: 330px;
       height: 330px;
       margin: 0px auto;
       background-color: #818181;
       text-align: center;
   }
   .item
   {
       width: 100px;
       height: 100px;
       float:left;
       border: white 1px solid;
       margin: 4px;
       line-height: 100px;
       font-size: 2rem;
       color: white;
   }
   /* 分组结构伪类分二步：
   1.元素按类型进行分组。
   2.分组中根据索引进行选择。 */
   .box span:last-of-type
   {
       background-color: lightgreen;
   } 
   /* 匹配任意一个元素 */
   .box span:nth-last-of-type(-n+5)
   {
       background-color: maroon;
   }
</style>
<body>
  <div class="box">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <span class="item">4</span>
      <span class="item">5</span>
      <span class="item">6</span>
      <span class="item">7</span>
      <span class="item">8</span>
      <span class="item">9</span>
  </div>
</body>
</html>
伪类选择器(不分组与分租)

伪类选择器

相关文章
