javascript - ReactJS:如何将类名应用于两个元素标签?

标签 javascript html css reactjs

<分区>


这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里,这个问题的解决方式不太可能帮助 future 的读者。

关闭 6 年前

我有以下内容。但样式仅适用于 <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>

最佳答案

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

关于javascript - ReactJS:如何将类名应用于两个元素标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41191280/

上一篇:html - 为什么我的样式表没有链接到我的 HTML 文件?

下一篇:javascript - jquery Microsoft Word/Google Docs 分页

相关文章:

PHP 和 PDO 防止 Javascript 注入(inject)

javascript - 在 Highcharts 的工具提示中显示数组中的数组

javascript - React Native - React Native Firebase - Google 登录 Android

javascript - 居中的内联文本在淡入时重新定位

javascript - 显示计时器的当前时间

javascript - 如何提高 JavaScript 性能/减少大型 HTML 页面上的页面负载?

javascript - Kendo ASP.NET MVC 包装器限制

javascript - forEach 回调不使用 getElementsByClassName 执行

javascript - 是否可以将混合模式应用于 css/javascript/canvas 中的文本?

html - 如何在父 DIV 中居中对齐 float DIV?