表格 CSS 根本没有出现答案

【问题标题】：Table CSS is not showing up at all表格 CSS 根本没有出现
【发布时间】：2018-12-20 09:03:25
【问题描述】：

我有这个简单的 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。

【问题讨论】：

您需要将表格包装在<body> 元素中.. 并将您的<style> 包装在<head> 元素中，内部 @987654326 之前的<html> 标签@

标签： html css html-table

【解决方案1】：

将标题单元格更改为th，将普通单元格更改为td。这样您就不需要 id、class 或 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>

【讨论】：

【解决方案2】：

你可以这样做：

.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 并左对齐。

【讨论】：

谢谢，但是如何设置每个单元格的样式？我不这样做？
@Marshall 对于您不需要的特定问题，即使您想为每个单元格设置样式，您也应该使用 class 而不是 id，因为 id 是独一无二的并且不应该在多个地方使用。欢迎您乐于助人:)

【解决方案3】：

有几个问题需要考虑。

style 标签属于head 标签，属于html 标签。
您不能在同一个文档中使用多个ids - they're supposed to be unique。尝试使用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>

【讨论】：