时间戳

首页 > 解决方案 > 所有特定的 CSS 选择器

html - 所有特定的 CSS 选择器

问题描述

我有多个这样的表

表格1

<table border="1" style="border-collapse: collapse">
        <thead>
            <tr>
                <th class="One">One</th>
                <th class="Two">Two</th>
                <th class="Three">Three</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>DateTime</td>
                <td>Price</td>
                <td>Number</td>
            </tr>
            <tr>
                <td>DateTime</td>
                <td>Price</td>
                <td>Number</td>
            </tr>
         </tbody>
    </table>

表 2

<table border="1" style="border-collapse: collapse">
            <thead>
                <tr>
                    <th class="Two">Two</th>
                    <th class="Three">Three</th>
                    <th class="One">One</th>
                    <th class="Four">Four</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Price</td>
                    <td>Number</td>
                    <td>DateTime</td>
                    <td>Text</td>
                </tr>
                <tr>
                    <td>Price</td>
                    <td>Number</td>
                    <td>DateTime</td>
                    <td>Text</td>
                </tr>
             </tbody>
        </table>

表共享一些列，但它们可以按不同的顺序排列。可以只为我的班级设置特定列的样式吗？例如，将颜色设置为红色，对于所有具有“三”类的<td>位置。<th>

标签： htmlcss

解决方案

干得好。由于您想针对特定列，从您在示例中的表中，我想如果您能够定位a 的每一nth-child(2)列，那么您很好，您的 CSS 代码应该如下所示。tdtr

tr.redClass td {
  background-color: #a33;
  color: #fff;
}

.redCol td {
  background-color: #a33;
  color: #fff;
}
 .every-other-one tr:nth-child(n) td:nth-child(2) {background: #a33}
<!-- set classes for all tr -->
<p> A class for spesial col</p>
<table border="1" style="border-collapse: collapse" class="every-other-one">
  <thead>
  <tr>
    <th class="Two">Two</th>
    <th class="Three">Three</th>
    <th class="One">One</th>
    <th class="Four">Four</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Price</td>
    <td>Number</td>
    <td>DateTime</td>
    <td>Text</td>
  </tr>
  <tr>
    <td>Price</td>
    <td>Number</td>
    <td>DateTime</td>
    <td>Text</td>
  </tr>
  <tr>
    <td>Price</td>
    <td>Number</td>
    <td>DateTime</td>
    <td>Text</td>
  </tr>
  </tbody>
</table>
<br>

我希望可以为您服务。干杯

推荐阅读