ReactJS:如何将className应用于两个元素标签

Question

我有以下内容。但是样式仅适用于<th>。我尝试了#test-table td, #test-table th {}和#test-table td th {}，但没有任何应用。

CSS：

#test-table td, th {
  color: white;
  background-color: yellow;
  text-align: left;
}

代码：

    <table className="test-table">
      <thead>
        <tr>
          <th>head1</th>
          <th>head2</th>
          <th>head3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>col1</td>
          <td>col2</td>
          <td>col2</td>
        </tr>
      </tbody>
    </table>

如何将样式应用于<td>和<th>？对于CSS选择器，特别是ReactJ的正确层次结构通常是什么？例如容器通常是className和id定义的任何内部元素吗？

编辑

我该如何实现：

表图像

尝试以下内容，但行不通：

    <table className="test-table">
      <thead>
        <tr>
          <th colspan="2">List</th>
          <th rowspan="2">Monday</th>
          <th rowspan="2">Tuesday</th>
        </tr>
        <tr>
          <th>Names</th>
          <th>Class 1</th><th>Class 2</th>
          <th>Class 1</th><th>Class 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Kev</td>
          <td>abc</td><td>def</td>
          <td>ghi</td><td>jkl</td>
        </tr>
      </tbody>
    </table>

Answer 1

您需要使用.，因为您是指类。看看这个小提琴：http：//jsfiddle.net/k7wbzc4j/1/创建表并应用CSS。

Answer 2

如果您使用的是CSS选择器，则可以将#SomeID用于IDS或.someclass，但我不知道ClassName的CSS选择器。一种选择是使用

.test-table td, .test-table th

<table class="test-table">

如此小提琴中所见