Question

我有这个简单的html代码。我只是在尝试格式化颜色，但是没有CSS实际上在格式化它。

我试图更改变量名称，将表类更改为id，反之亦然。

<head>
    <style>
    .cool-table {
        width: 500px;
        border: 1px solid #000;
        background-color: blue;
        color: purple;
    }

    .cool-table tr:first-child td {
        font-size: 30px;
        background-color: red;
        color: green;
    }

    #cell-style {
        font-size: 8px;
        text-align: left;
    }
    </style>
</head>

<html>
    <body>
        <table class="cool-table">
            <tr>
                <th id="cell-style">Fruit</th>
                <th id="cell-style">Price</th>
            </tr>

            <tr>
                <th id="cell-style">Apples</th>
                <th id="cell-style">$10</th>
            </tr>

            <tr>
                <th id="cell-style">Banana</th>
                <th id="cell-style">$50</th>
            </tr>

            <tr>
                <th id="cell-style">Mango</th>
                <th id="cell-style">$20</th>
            </tr>
        </table>
    </body>
</html>

应将整个表格的背景显示为蓝色，文字应为紫色。第一行的文本应较大，带有红色背景和绿色文本。其余单元格应具有蓝色背景，带有紫色文本和8px字体。

Answer 1

您可以这样简单地进行操作：

.cool-table {
  width: 500px;
  border: 1px solid #000;
  background-color: blue;
  color: purple;
}

.cool-table tr:first-child {
  background-color: red;
  color: green !important;
}

.cool-table tr:not(:first-child) {
  font-size: 8px;
  text-align: left;
}

<table class="cool-table">
  <tr>
    <th>Fruit</th>
    <th>Price</th>
  </tr>

  <tr>
    <th>Apples</th>
    <th>$10</th>
  </tr>

  <tr>
    <th>Banana</th>
    <th>$50</th>
  </tr>

  <tr>
    <th>Mango</th>
    <th>$20</th>
  </tr>
</table>

第一个孩子的背景是红色和绿色，不是第一个孩子的所有东西的字体大小为8，并向左对齐。

Answer 2

将标头单元格更改为th，将普通单元格更改为td。这样，您就不需要ID，类或tr:first-child即可将标题行与其余行分开。请注意，如果您使用id，则应仅在单个HTML标签上使用它。对于多个标签，请使用class。

<html>

<head>
  <style>
    .cool-table {
      width: 500px;
      border: 1px solid #000;
      background-color: blue;
      color: purple;
    }
    
    .cool-table th { /* Changed to th, no need for tr:first-child */
      font-size: 30px;
      background-color: red;
      color: green;
    }
    
    .cool-table td { /* Styling td-tags (table cells) */
      font-size: 8px;
      text-align: left;
    }
  </style>
</head>

<body>
  <table class="cool-table">
    <tr>
      <th>Fruit</th> <!-- Keep as th -->
      <th>Price</th>
    </tr>

    <tr>
      <td>Apples</td> <!-- Changed to td -->
      <td>$10</td>
    </tr>

    <tr>
      <td>Banana</td>
      <td>$50</td>
    </tr>

    <tr>
      <td>Mango</td>
      <td>$20</td>
    </tr>
  </table>
</body>

</html>

Answer 3

有几个问题要看。

style标签属于head标签中的html标签。
您不能在同一文档they're supposed to be unique中使用多个id。尝试使用class，如下所示。
第二个CSS块不执行任何操作。也许您想从选择器中删除td，如下所示？
您的几种样式未应用，因为它们会相互覆盖。尝试使选择器更具体，以赋予它们更高的优先级。

您真的想了解structure of html documents。您可以使用w3 validator

进行验证

您还可以了解有关CSS from Mozilla的更多信息。

<!doctype html>
    <html><head>
    
      <style>
          
      .cool-table {
        width: 500px;
        border: 1px solid #000;
        background-color: blue;
        color: purple;
    }
    
    .cool-table tr:first-child { /* removed 'td' */
        font-size: 30px;
        background-color: red;
        color: green;
    }
    
    .cell-style { /* changed to class */
        font-size: 8px;
        text-align: left;
        color: yellow;
    }
    
      </style>
      </head><body>
    
        <table class="cool-table">
            <tr>
                <th class="cell-style">Fruit</th>
                <th class="cell-style">Price</th>
            </tr>
    
            <tr>
                <th class="cell-style">Apples</th>
                <th class="cell-style">$10</th>
            </tr>
    
            <tr>
                <th class="cell-style">Banana</th>
                <th class="cell-style">$50</th>
            </tr>
    
            <tr>
                <th class="cell-style">Mango</th>
                <th class="cell-style">$20</th>
            </tr>
        </table>
        </body>
    </html>

表格CSS根本没有显示

3 个答案: