zoukankan      html  css  js  c++  java
  • nth-child的运用

    CSS3 :nth-child() 选择器

    1、下面的语句表示选择someOnediv下的第二个li标签

    .someOnediv li:nth-child(2){background:#090}

     2、下面的语句表示选择某一同名集合class中的第二个(scss样式中较常见)

    ...
    &:nth-child(2) {
      border-right: none;
    }
    ...

    3、下面的语句表示选择同名集合中的第一个

    ...
    
    &:first-child {
        border-radius: 15 * 2rpx 0 0 15 * 2rpx;
    }
    ...

    4、下面的语句表示选择同名集合中的倒数第一个

    ...
        &:lastt-child {
            border-radius: 15 * 2rpx 0 0 15 * 2rpx;
        }
    ...

     5、下面的语句表示选择某一同名集合class中的倒数第二个(scss样式中较常见)

    .someOne li:nth-last-child(3){background:#090}

    6、下面语句表示选取大于等于某数的标签 (scss样式中较常见)

    ...
    &:nth-child(n+4) {
       margin-top: 18rpx;
    } ...

    7、下面语句表示选取小于等于某数的标签

    ...
    .someOne li:nth-child(-n+4)
    {background:#090}
    ...

     

    8、下面语句表示选取奇数或者偶数的关键字,odd和even是可用于匹配下标是奇数或者偶数的关键字

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

    9、通项公式

       使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。

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

    p:nth-child(3n+0)
    {
    background:#ff0000;
    }
  • 相关阅读:
    ZOJ 1060 Count the Color
    POJ 3321 Apple Tree
    数字三角形模型
    静态维护区间加等差数列的求和问题
    Codeforces Round #622 (Div. 2)-题解
    算法竞赛进阶指南0x00-算法基础
    Codeforces Round #628 (Div. 2)
    Codeforces Round #625 (Div. 2, based on Technocup 2020 Final Round)
    Codeforces Round #621 (Div. 1 + Div. 2)
    Codeforces Round #620 (Div. 2) 题解
  • 原文地址:https://www.cnblogs.com/zhishiyv/p/11396433.html
Copyright © 2011-2022 走看看