Question

我想在$ 100上应用CSS，该元素是div中的table元素。它应该是红色，但是我的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>

Answer 1

您可以执行以下操作：

table.new td div{
color:red;
}

它将在td标签内更改Div的css。

Answer 2

.new div{
  color:red;
}

简单更改或将类添加到div

Answer 3

第一种选择是使用const count = 10 timer(5000, 1000) .pipe( map(i => count- i), take(count + 1), tap(async () => { let res: any = await this.chk_data_status(id); // return as a Promise console.log(res.status); return res.status; }), takeWhile((status: any) => { console.log(status); return status!= 'Processing'; }), finalize(() => doSomething()) ).subscribe();（依次选择td内，tr内，表内的div）。

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

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

table

table tr td div {
  color:red;
}

.red-text {
  color:red;
}

Answer 4

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

1）使用内联CSS

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

2）使用内部CSS。

在此方法中，我们将首先为div分配一个包含$ 100的类。然后，我们将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>

我如何在表内将div应用于CSS？

4 个答案: