绘制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>