我如何为表格内的 div 应用 css？ [复制]答案

【问题标题】：How can i apply css for div inside table? [duplicate]我如何为表格内的 div 应用 css？ [复制]
【发布时间】：2019-11-02 20:45:53
【问题描述】：

我想在 $100 上应用 CSS，它是 table 内的 div 元素。它应该是红色的，但我的 CSS 选择器不起作用。

<!DOCTYPE html>
    <html>
    <head>
    <style>
    table { 
      display: table;
      border-collapse: separate;
      border-spacing: 2px;
      border-color: gray;
    }
    
    .new > div{
    color:red;
    }
    
    </style>
    </head>
    <body>
    
    <table class="new">
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>
        <div>$100</div>
        </td>
      </tr>
      <tr>
        <td>February</td>
        <td>$80</td>
      </tr>
    </table>
    
    </body>
    </html>

【问题讨论】：

了解+, ~ and > symbols in CSS

标签： html css

【解决方案1】：

你可以这样做：

table.new td div{
color:red;
}

它会改变 td 标签内的 Div 的 css。

【讨论】：

【解决方案2】：

.new div{
  color:red;
}

简单的改变或添加类到 div

【讨论】：

【解决方案3】：

第一个选项是使用table tr td div（选择div，即在td内，在tr内，在table内按顺序）。

第二个选项是使用class。这样，您只需添加相同的class，就可以在您需要的任何元素上重复使用相同的样式。

您使用的.new > div 不起作用的原因是> 选择器仅用于选择直接子元素。由于div 不直接位于table 元素内，因此不会被选中。

table tr td div {
  color:red;
}

.red-text {
  color:red;
}

<!DOCTYPE html>
<html>
<head>
<style>
table { 
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

.new > div{
color:red;
}

</style>
</head>
<body>

<table class="new">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>
    <div>$100</div>
    </td>
  </tr>
  <tr>
    <td>February</td>
    <td class="red-text">$80</td>
  </tr>
</table>

</body>
</html>

【讨论】：

【解决方案4】：

您可以通过以下方式进行：

1) 使用内联 CSS

<div style="color:red;">$100</div>

2) 使用内部 CSS。

在这个方法中，我们将首先为包含 $100 的 div 分配一个类。然后我们将CSS给<style>标签中的类。

<style>
.red
{
color:red;
}
</style>


<div class="red">$100</div>

以下是使用第二种方法的代码：

<!DOCTYPE html>
    <html>
    <head>
    <style>

table { 
      display: table;
      border-collapse: separate;
      border-spacing: 2px;
      border-color: gray;
    }
    
    .new > div{
    color:red;
    }
    .red
    {
    color:red;
    }
    
  </style>
    </head>
    <body>
    
    <table class="new">
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>
        <div class="red">$100</div>
        </td>
      </tr>
      <tr>
        <td>February</td>
        <td>$80</td>
      </tr>
    </table>
    
    </body>
    </html>

【讨论】：