css - ReactJS 选择所有相似的标签进行样式设置

Question

我有一个有两列的表，我想对它们进行样式设置，使第一列的样式设置为text-align:left，第二列设置为text-align:right.

我声明这样的样式：

const styles = {
    table: {
      width: '100%',
    } 
}

表格如下所示：

<table style={styles.table}>   
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>   
  </tr>   
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>   
  </tr> 
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>   
  </tr> 
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>   
  </tr> 
</table>

一种详细的方法是为每一列创建一个样式并将它们包含在每个<td>. 有什么方法可以一次选择所有 td（单列）？

Answer 1

只需使用伪类。例如：

td:first-child {
  text-align: left;
}
td:nth-chuld(2) {   //You can use :last-child instead of :nth-child(n) in your example
  text-align: right;
}

import './styles.css'如果它在组件的开头不是 react-native并使用 className 进行样式设置。像这样：<table className='table'>...</table>。