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;
}

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