css 指定孩子节点样式设置
我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情
作为一个前端，我经常遇到list展示的需求。
如果是设置一个list孩子节点的样式，我可能会这样写
.list{
}
// 一般我list的child是div
.list > div {
}但是遇到排名次的需求，前三名要用框框框柱,经常要写这样的代码
{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代码如下:
.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部分：
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解决后，代码感觉更加清爽了，写代码的速度也更快了。
虽然只是少写了几个类名，但是日积月累之前，节省的时间也不可小觑。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-09-07，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
