Jinuss's blog Jinuss's blog
首页
  • 源码合集

    • Leaflet源码分析
    • Openlayers源码合集
    • vue3源码
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • 学习
  • 实用技巧
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

东流

Web、WebGIS技术博客
首页
  • 源码合集

    • Leaflet源码分析
    • Openlayers源码合集
    • vue3源码
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • 学习
  • 实用技巧
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • HTML

  • CSS

    • CSS教程和技巧收藏
    • flex布局语法
    • flex布局案例-基础
    • flex布局案例-骰子
    • flex布局案例-圣杯布局
    • flex布局案例-网格布局
    • flex布局案例-输入框布局
    • CSS3之transition过渡
    • CSS3之animation动画
    • CSS自定义设置滚动条样式
    • 「布局技巧」图片未加载前自动撑开元素高度
    • 文字在一行或多行时超出显示省略号
    • 从box-sizing属性入手,了解盒子模型
    • 水平垂直居中的几种方式-案例
    • 如何根据系统主题自动响应CSS深色模式
    • CSS-function汇总
    • 网格布局中的动画
    • CSS属性background-position-y实现动画
    • CSS实现github右上角图标
    • CSS3实现购物车动画效果
    • css-functions-属性函数
    • css-functions-图形函数
    • CSS3换装达人原理
    • iconfont图标字体库介绍
    • css关键字currentColor
    • css伪类选择器系列一
    • css伪类选择器系列二
      • 动态修改iconfont图标配色
      • 使用CSS3实现loading效果
      • CSS滚动驱动动画
      • CSS实现图片3D立体效果
      • iconfont中svg图片颜色动态修改第二弹
    • 浏览器

    • 页面
    • CSS
    东流
    2024-09-25
    目录

    css伪类选择器系列二

    # 概述

    本文主要讲述CSS的部分伪类选择器第二篇,包括::nth-child、:nth-last-child、:nth-of-type和:nth-last-of-type。

    # :nth-child()

    :nth-child伪类是根据父元素的子元素列表中的索引来选择元素。

    # 语法

    :nth-child是以一个参数nth来描述匹配兄弟元素列表中元素索引的模式。元素索引从1开始。

    :nth-child(nth) {
      /** */
    }
    
    1
    2
    3

    其中nth可以是关键字也可以是函数符号

    • 关键字 :odd表示奇数,如 1、3、5...;even表示偶数,如 2、4、6。

    • 函数符号

      • <An+B>:A表示步长;B表示偏移量;n表示从 0 开始的整数,如 5n+1就是包含 1、6、11...

      • nth of <selector>:表示选择与<selector>选择器匹配的第nth个元素,这时的nth可以是<An+B>的模式或者非负整数

    • 非负整数:<nth>也可以就是一个数值,如 1,3,6,8...

    # 示例

    • 效果
    • 代码如下:
    <style>
      .first {
        .children.pre span:nth-child(-n + 3) {
          background: rgb(30, 120, 223);
        }
    
        .children.odd span:nth-child(odd) {
          background: red;
        }
    
        .children.odd span:nth-child(2n + 1) {
          border: 2px solid #000;
        }
    
        .children.even span:nth-child(even) {
          background: orange;
        }
    
        .children.even span:nth-child(2n) {
          border: 4px dotted green;
        }
    
        .children span:nth-child(-n + 3 of .im) {
          background-color: gold;
        }
      }
    </style>
    <div class="order">
      <h2><code>:nth-child</code></h2>
      <div class="content first">
        <div class="item">
          <div class="children">
            <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
            <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
          </div>
        </div>
        <div class="item">
          <h5>-n+3:前3个背景为蓝色</h5>
          <div class="children pre">
            <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
            <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
          </div>
        </div>
        <div class="item">
          <h5>odd:背景为红色;2n+1:边框加粗且颜色为黑色</h5>
          <div class="children odd">
            <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
            <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
          </div>
        </div>
        <div class="item">
          <h5>odd:背景为橘色;2n+1:边框改为虚线加粗且颜色为绿色</h5>
          <div class="children even">
            <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
            <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
          </div>
        </div>
        <div class="item">
          <h5>of &lt;selector /&gt; :子元素前3个`im`类的背景色改为金色</h5>
          <div class="children of">
            <span>1</span><span class="im">2</span><span>3</span><span>4</span
            ><span class="im">5</span> <span class="im">6</span><span>7</span
            ><span>8</span><span class="im">9</span><span>10</span>
          </div>
        </div>
      </div>
    </div>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67

    # :nth-last-child()

    :nth-last-child()和:nth-child的语法类似,不过:nth-last-child()是从最后倒着计数,和后者相反。

    # 示例

    • 效果
    • 代码如下:
    <style>
      .last {
        .children.pre span:nth-last-child(-n + 3) {
          background: rgb(30, 120, 223);
        }
    
        .children.odd span:nth-last-child(odd) {
          background: red;
        }
    
        .children.odd span:nth-last-child(2n + 1) {
          border: 2px solid #000;
        }
    
        .children.even span:nth-last-child(even) {
          background: orange;
        }
    
        .children.even span:nth-last-child(2n) {
          border: 4px dotted green;
        }
    
        .children span:nth-last-child(-n + 3 of .im) {
          background-color: gold;
        }
      }
    </style>
    <h2><code>:nth-last-child</code></h2>
    <div class="content last">
      <div class="item">
        <div class="children">
          <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
          <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
        </div>
      </div>
      <div class="item">
        <h5>-n+3:后3个背景为蓝色</h5>
        <div class="children pre">
          <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
          <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
        </div>
      </div>
      <div class="item">
        <h5>odd:背景为红色;2n+1:边框加粗且颜色为黑色</h5>
        <div class="children odd">
          <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
          <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
        </div>
      </div>
      <div class="item">
        <h5>odd:背景为橘色;2n+1:边框改为虚线且颜色为绿色</h5>
        <div class="children even">
          <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
          <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
        </div>
      </div>
      <div class="item">
        <h5>of &lt;selector /&gt; :子元素后3个`im`类的背景色改为金色</h5>
        <div class="children of">
          <span>1</span><span class="im">2</span><span>3</span><span>4</span
          ><span class="im">5</span> <span class="im">6</span><span>7</span
          ><span>8</span><span class="im">9</span><span>10</span>
        </div>
      </div>
    </div>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65

    # :nth-of-type()

    :nth-of-type()伪类是基于相同类型(标签名称)的兄弟元素中的位置来匹配元素。

    # 语法

    :nth-of-type(nth) {
      /** */
    }
    
    1
    2
    3

    nth表示匹配元素的模式,同上差不多。可以是关键词odd或even,也可以是<An+B>,还可以是非负整数。

    # 示例

    • 效果
    • 代码如下:
    <style>
      .first {
        .children.odd span.light:nth-of-type(odd) {
          color: red;
        }
    
        .children.even span.light:nth-of-type(even) {
          color: rgb(99, 32, 32);
          font-weight: bolder;
        }
    
        .children.blue span:nth-of-type(2n + 1) {
          color: rgb(14, 53, 224);
          font-weight: bolder;
        }
      }
    </style>
    <h2><code>:nth-of-type</code></h2>
    <div class="content first">
      <div class="item">
        <div class="children">
          <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
          <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
        </div>
      </div>
      <div class="item">
        <h5>odd:颜色为红色</h5>
        <div class="children odd">
          <span>1</span>
          <span class="light">2</span>
          <span>3</span>
          <span class="dark">4</span>
          <span>5</span>
          <span class="light">6</span>
          <span class="light">7</span>
          <span>8</span>
          <span class="light">9</span>
          <span>10</span>
        </div>
      </div>
      <div class="item">
        <h5>even:颜色为棕色</h5>
        <div class="children even">
          <span>1</span>
          <span class="light">2</span>
          <span>3</span>
          <span class="dark">4</span>
          <span>5</span>
          <span class="light">6</span>
          <span class="light">7</span>
          <span>8</span>
          <span class="light">9</span>
          <span>10</span>
        </div>
      </div>
    
      <div class="item">
        <h5>2n+1:颜色为蓝色</h5>
        <div class="children blue">
          <span>1</span>
          <span class="light">2</span>
          <span>3</span>
          <span class="dark">4</span>
          <span>5</span>
          <span class="light">6</span>
          <span class="light">7</span>
          <span>8</span>
          <span class="light">9</span>
          <span>10</span>
        </div>
      </div>
    </div>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72

    # :nth-last-of-type()

    :nth-last-of-type()和:nth-of-type的语法类似,不过:nth-last-of-type()是从最后倒着计数,和后者相反。

    # 示例

    • 效果
    • 代码如下:
    <style>
      .last {
        .children.odd span.light:nth-last-of-type(odd) {
          color: red;
        }
    
        .children.even span.light:nth-last-of-type(even) {
          color: rgb(99, 32, 32);
          font-weight: bolder;
        }
    
        .children.blue span:nth-last-of-type(2n + 1) {
          color: rgb(14, 53, 224);
          font-weight: bolder;
        }
      }
    </style>
    <h2><code>:nth-of-last-type</code></h2>
    <div class="content last">
      <div class="item">
        <div class="children">
          <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
          <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
        </div>
      </div>
      <div class="item">
        <h5>odd:颜色为红色</h5>
        <div class="children odd">
          <span>1</span>
          <span class="light">2</span>
          <span>3</span>
          <span class="dark">4</span>
          <span>5</span>
          <span class="light">6</span>
          <span class="light">7</span>
          <span>8</span>
          <span class="light">9</span>
          <span>10</span>
        </div>
      </div>
      <div class="item">
        <h5>even:颜色为棕色</h5>
        <div class="children even">
          <span>1</span>
          <span class="light">2</span>
          <span>3</span>
          <span class="dark">4</span>
          <span>5</span>
          <span class="light">6</span>
          <span class="light">7</span>
          <span>8</span>
          <span class="light">9</span>
          <span>10</span>
        </div>
      </div>
    
      <div class="item">
        <h5>2n+1:颜色为蓝色</h5>
        <div class="children blue">
          <span>1</span>
          <span class="light">2</span>
          <span>3</span>
          <span class="dark">4</span>
          <span>5</span>
          <span class="light">6</span>
          <span class="light">7</span>
          <span>8</span>
          <span class="light">9</span>
          <span>10</span>
        </div>
      </div>
    </div>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    编辑 (opens new window)
    上次更新: 2024/09/25, 06:33:24
    css伪类选择器系列一
    动态修改iconfont图标配色

    ← css伪类选择器系列一 动态修改iconfont图标配色→

    最近更新
    01
    GeoJSON
    05-08
    02
    Circle
    04-15
    03
    CircleMarker
    04-15
    更多文章>
    Theme by Vdoing | Copyright © 2024-2025 东流 | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式