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选择器的正确层次结构，特别是对于ReactJS？例如容器通常是className，任何内部元素都是用id定义的？

修改

我如何实现：

Table Image

尝试以下操作但不起作用：

    <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

如果您正在使用css选择器，则可以将#someId用于ids或.someClass用于类，但我不知道className的css选择器。一个选项是使用

.test-table td, .test-table th

与

<table class="test-table">

如此fiddle

中所示

Answer 2

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

ReactJS：如何将classname应用于两个元素标签？

2 个答案: