react CSS :last-child 最后一个下边框线如何去掉

**React CSS :last-child 最后一个下边框线如何去掉**

在 React 中，我们经常需要使用 CSS 来样式化我们的组件。其中一种常见的需求是去掉最后一个元素的下边框线。这篇文章将教你如何使用 `:last-child`伪类来实现这一点。

**什么是 :last-child伪类**

`:last-child`伪类用于选择文档中最后一个子元素。它可以与其他 CSS选择器结合使用，以选择特定位置的元素。

**去掉最后一个下边框线的示例代码**

假设我们有一个简单的列表组件，需要去掉最后一个元素的下边框线：

jsximport React from 'react';

const List = () => {
 const items = [
 { id:1, name: 'Item1' },
 { id:2, name: 'Item2' },
 { id:3, name: 'Item3' }
 ];

 return (
 <ul>
 {items.map((item) => (
 <li key={item.id}>
 <span>{item.name}</span>
 </li>
 ))}
 </ul>
 );
};

css.list li:last-child {
 border-bottom: none;
}

jsximport React from 'react';

const Table = () => {
 const rows = [
 { id:1, name: 'Row1' },
 { id:2, name: 'Row2' },
 { id:3, name: 'Row3' }
 ];

 return (
 <table>
 <tbody>
 {rows.map((row) => (
 <tr key={row.id}>
 <td>{row.name}</td>
 </tr>
 ))}
 </tbody>
 </table>
 );
};

css.table tr:last-child {
 border-bottom: none;
}