绘制html表头

Question

我有这样的表结构

 <table class="dgrid" rules="all" id="Gridview2" style="border-collapse: collapse;" cellspacing="0" border="1">
    <tbody>
        <tr>
            <th scope="col">HEADER 1</th>
            <th scope="col">HEADER 2</th>
            <th scope="col">HEADER 3</th>
            <th scope="col">HEADER 4</th>
        </tr>
        <tr>
            <td>DATA 1</td>
            <td>DATA 2</td>
            <td>DATA 3</td>
            <td>DATA 4</td>
        </tr>
    </tbody>
</table>

基于这种结构，我想用颜色绘制标题表。我做了这个 CSS 但什么也没发生

<style>
    .dgrid th scope {
        color: #18bc9c;
    }
</style>

Answer 1

你需要使用属性选择器[attribute="value"]

.dgrid th[scope="col"] {
  color: #18bc9c;
}

<table class="dgrid" rules="all" id="Gridview2" style="border-collapse: collapse;" cellspacing="0" border="1">
  <tbody>
    <tr>
      <th scope="col">HEADER 1</th>
      <th scope="col">HEADER 2</th>
      <th scope="col">HEADER 3</th>
      <th scope="col">HEADER 4</th>
    </tr>
    <tr>
      <td>DATA 1</td>
      <td>DATA 2</td>
      <td>DATA 3</td>
      <td>DATA 4</td>
    </tr>
  </tbody>
</table>