logo标签列表

如何为表格内的 div 元素应用 CSS 样式？

htmlcss
4
我想在一个位于标签内部的
元素上应用CSS样式，使其颜色为红色。但是我的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>

阅读有关 CSS 中 +, ~ 和 > 符号的内容。 - Ismail Vittal
4个回答
3
你可以像这样做：
table.new td div{
color:red;
}

它会改变td标签中Div元素的css样式。
1
.new div{
  color:red;
}

简单更改或向div添加类
0
您可以通过以下方式实现：

1）使用内联 CSS 

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

2) 使用内部CSS。

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

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

0

第一种选择是使用 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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接