css 指定孩子节点样式设置

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情

作为一个前端，我经常遇到list展示的需求。

如果是设置一个list孩子节点的样式，我可能会这样写

代码语言：javascript复制

.list{

}
// 一般我list的child是div
.list > div {

}

但是遇到排名次的需求，前三名要用框框框柱,经常要写这样的代码

代码语言：javascript复制

      {new Array(6).fill(1).map((v, index) => {
        if(index<3){
            return <div key={index   ''} className='item boder'>啊</div>
        }
        return <div key={index   ''} className='item'>啊</div>
      })}

我就思考，css伪类里面有:first-child和:last-child 。那会不会有控制某个范围child的伪类呢？

查了一下，发现还真有，那就是:nth-child。

它的使用方式是:nth-child(An B)。

• A 是整数步长，
• B 是整数偏移量，
• n 是所有非负整数，从 0 开始。

可以衍生以下几种使用方式:

选择第3项：:nth-child(3) 选择第1到第3项：:nth-child(-n 3) 选择偶数项：:nth-child(2n) 选择奇数项：:nth-child(2n 1) 选择范围（交集），从第4个到第5个：:nth-child(n 4):nth-child(-n 5)

css代码如下:

代码语言：javascript复制

.container :nth-child(n){
  display: flex;
  margin-top: 3px;
}
.container :nth-child(2n){
  margin-bottom: 10px;
  font-size: 12px;
}


.list :nth-child(3){
  color: red;
}

.list1 :nth-child(-n 3){
  color: red;
}

.list2 :nth-child(2n){
  color: red;
}

.list3 :nth-child(2n-1){
  color: red;
}

.list4 :nth-child(n 4){
  color: red;
}

.list4 :nth-child(n 4){
  color: red;
}

.list5 :nth-child(n 4):nth-child(-n 5){
  color: red;
}

js部分：

代码语言：javascript复制

import React, { useState, useCallback } from 'react';
import ReactDom from 'react-dom';

const Test = function () {
  const [count, setCount] = useState(0);


  return <div className='container'>
    <div>选择第3项</div>
    <div className='list'>
      {new Array(6).fill(1).map((v, index) => {
        return <div key={index   ''}>啊</div>
      })}
    </div>
     <div>选择第1到第3项</div>
    <div className='list1'>
      {new Array(6).fill(1).map((v, index) => {
        return <div key={index   ''}>啊</div>
      })}
    </div>
     <div>选择偶数项</div>
    <div className='list2'>
      {new Array(6).fill(1).map((v, index) => {
        return <div key={index   ''}>啊</div>
      })}
    </div>
    <div>选择奇数项</div>
    <div className='list3'>
      {new Array(6).fill(1).map((v, index) => {
        return <div key={index   ''}>啊</div>
      })}
    </div>
    <div>选择范围（交集），从第4个到第5个(n 4)(-n 5)</div>
    <div className='list5'>
      {new Array(6).fill(1).map((v, index) => {
        return <div key={index   ''}>啊</div>
      })}
    </div>
  </div>;
};

ReactDom.render(<Test />, document.getElementById('app'));

我看下代码，运行起来的效果

css 指定孩子节点样式设置

从之前代码解决，变成css解决后，代码感觉更加清爽了，写代码的速度也更快了。

虽然只是少写了几个类名，但是日积月累之前，节省的时间也不可小觑。

css

0 人点赞