:nth-child()选择器学习笔记

最新推荐文章于 2022-11-28 22:50:35 发布

Blue www

最新推荐文章于 2022-11-28 22:50:35 发布

阅读量359

点赞数

文章标签： css

原文链接：www.baidu.com

版权

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>天猫首页楼层导航</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .floor-nav {
      width: 36px;
      height: 369px;

      list-style: none;
      padding: 0;
      margin: 0;

      position: fixed;
      left: 100px;
      bottom: 100px;
    }

    .floor-nav li {
      width: 36px;
      height: 36px;
      margin-bottom: 1px;
      background-color: rgba(0, 0, 0, .6);
      padding: 6px;
    }

    .floor-nav li:first-child,
    .floor-nav li:last-child {
      padding: 12px 6px;
    }

    .floor-nav li:nth-child(10) {
      background-color: rgba(0, 0, 0, .3);
    }

    .floor-nav li:nth-child(1):hover {
      background-color: #ff0036;
    }

    .floor-nav li:nth-child(2):hover {
      background-color: #64C333;
    }

    .floor-nav li:nth-child(3):hover {
      background-color: #ff0036;
    }

    .floor-nav li:nth-child(4):hover {
      background-color: #EA5F8D;
    }

    .floor-nav li:nth-child(5):hover {
      background-color: #0AA6E8;
    }

    .floor-nav li:nth-child(6):hover {
      background-color: #64C333;
    }

    .floor-nav li:nth-child(7):hover {
      background-color: #F15453;
    }

    .floor-nav li:nth-child(8):hover {
      background-color: #19C8A9;
    }

    .floor-nav li:nth-child(9):hover {
      background-color: #ff0036;
    }

    .floor-nav li a {
      display: block;
      width: 100%;
      height: 100%;
      text-decoration: none;
      font-size: 12px;
      color: #fff;
      text-align: center;
      line-height: 12px;
    }
  </style>
</head>

<body>
  <ul class="floor-nav">
    <li><a href="#">导航</a></li>
    <li><a href="#">天猫超市</a></li>
    <li><a href="#">天猫国际</a></li>
    <li><a href="#">美丽人生</a></li>
    <li><a href="#">潮电酷玩</a></li>
    <li><a href="#">居家生活</a></li>
    <li><a href="#">打造爱巢</a></li>
    <li><a href="#">户外出行</a></li>
    <li><a href="#">猜你喜欢</a></li>
    <li><a href="#">顶部</a></li>
  </ul>
</body>

</html>

效果图：
在这里插入图片描述

定义和用法

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

n 可以是数字、关键词或公式。

实例 1
Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：

p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}

效果图：
在这里插入图片描述
实例 2
使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。

在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：

p:nth-child(3n+0)
{
background:#ff0000;
}

由于某些浏览器不兼容所以不能使用例如IE8等

Blue www

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
:nth-child()选择器学习笔记

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>天猫首页楼层导航</title> <style> * { box-sizing: border-
复制链接

扫一扫