0

我在让我的类选择器.table-heading-column在我的 CSS 中工作时遇到问题。

我已经通过验证器运行了这个，我的 HTML 或 CSS 都没有错误。我已经用尽了我能想出的所有修复方法。我是 HTML 新手，所以没有任何错误，我无法真正找到问题所在。从我的课本中，我几乎复制了这个例子，并将它们更改为我自己的偏好。任何想法都会有所帮助，谢谢。

这是我的完整代码：

.container {
  max-width: 60%;
  border: 4px solid black;
  margin: auto;
  padding: 1em;
  background-color: maroon;
}

article, body, div, nav, footer, header, h1, h2, h3, p, table, tbody, td, tfoot, th, thead, tr, ul {
  border: 0;
  padding: 0;
  margin: 0;
  top: 0;
}

header,
footer {
  padding: 1em;
  color: black;
  text-align: center;
  clear: both;
  background-color: white;
}

h3 {
  color: white;
  padding: 1em;
  margin: .5em;
}

nav {
  padding: 0;
  margin: .5em;
  overflow: hidden;
  float: top;
}

article {
  width: 70%;
  float: right;
  padding: 1em 0;
  color: white;
}

article p {
  padding: 0 1em 1em;
}

aside {
  padding: 1em 0;
  margin: 0;
  width: 30%;
  color: white;
}

ul {
  list-style-type: none;
  background-color: black;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

li {
  float: left;
}

li a {
  display: block;
  padding: 10px 12px;
  color: white;
  text-align: center;
  text-decoration: none;
}

li a:hover {
  background-color: green;
}

arrow {
  padding: 4px 8px;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  border: 2px solid black;
  font-size: 1.3em;
  background-color: white;
  padding: .25em;
  text-align: center;
}

table {
  width: 100%;
  border: 2px solid black;
}

th {
  background-color: #17C0CA;
}

.table-heading-column {
  //The colors do not change here //
  background-color: black;
}

.table-data-columns {
  //The colors do not change here //
  background-color: white;
}
<!DOCTYPE html>
<html lang="en">

<head>


  <meta charset="UTF-8">
  <title> </title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>

  <div class="container">

    <header>
      <h1>Resume</h1>
    </header>

    <nav>
      <ul>
        <li><a href="file:///C:/Users/cbdue/Desktop/index.html">&laquo; Previous</a>
          <li><a href="file:///C:/Users/cbdue/Desktop/index.html">Index</a></li>
          <li><a href="file:///C:/Users/cbdue/Desktop/resume.html">Resume</a></li>
          <li><a href="https://lichess.org/">Chess</a></li>

      </ul>
    </nav>

    <h3> Work Experience </h3>

    <table>

      <colgroup> // **Here is my class label** //
        <col class="table-heading-column">
        <col class="table-data-columns" span="3">
      </colgroup>

      <thead>
        <tr>
          <th rowspan="2">Company</th>
          <th colspan="2">Dates</th>
          <th rowspan="2">Title</th>
        </tr>
        <tr>
          <th>Start</th>
          <th>End</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>The Bistro Restuarant</td>
          <td>June 2004</td>
          <td>Dec 2015</td>
          <td>Manager</td>
        </tr>
        <tr>
          <td>Nagoya International School</td>
          <td>January 2015</td>
          <td>June 2016</td>
          <td>Learning Support Teacher</td>
        </tr>
        <tr>
          <td>International School of Latvia</td>
          <td>July 2016</td>
          <td>June 2018</td>
          <td>Learning Support Teacher</td>
        </tr>

      </tbody>

    </table>
  </div>
</body>

</html>

4

1 回答 1

2

此规则覆盖您的 col / colgroup 样式：

td, th {
    border: 2px solid black;
    font-size: 1.3em;
    background-color: white; /* <<< this will take precedence */
    padding: .25em;
    text-align: center;
}

td（表格“单元格”）在 HTML 结构中较低，这意味着上述规则更具体，它将覆盖您的 col/colgroup 样式。

.container {
  max-width: 60%;
  border: 4px solid black;
  margin: auto;
  padding: 1em;
  background-color: maroon;
}

article, body, div, nav, footer, header, h1, h2, h3, p, table, tbody, td, tfoot, th, thead, tr,
ul {
  border: 0;
  padding: 0;
  margin: 0;
  top: 0;
}

header,
footer {
  padding: 1em;
  color: black;
  text-align: center;
  clear: both;
  background-color: white;
}

h3 {
  color: white;
  padding: 1em;
  margin: .5em;
}

nav {
  padding: 0;
  margin: .5em;
  overflow: hidden;
  float: top;
}

article {
  width: 70%;
  float: right;
  padding: 1em 0;
  color: white;
}

article p {
  padding: 0 1em 1em;
}

aside {
  padding: 1em 0;
  margin: 0;
  width: 30%;
  color: white;
}

ul {
  list-style-type: none;
  background-color: black;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

li {
  float: left;
}

li a {
  display: block;
  padding: 10px 12px;
  color: white;
  text-align: center;
  text-decoration: none;
}

li a:hover {
  background-color: green;
}

arrow {
  padding: 4px 8px;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  border: 2px solid black;
  font-size: 1.3em;
  /*background-color: white;*/
  padding: .25em;
  text-align: center;
}

table {
  width: 100%;
  border: 2px solid black;
}

th {
  background-color: #17C0CA;
}

.table-heading-column {
  background-color: #f90;
}

.table-data-columns {
  background-color: #0f9;
}
<!DOCTYPE html>
<html lang="en">

<head>


  <meta charset="UTF-8">
  <title>test</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>

  <div class="container">

    <header>
      <h1>Resume</h1>
    </header>

    <nav>
      <ul>
        <li><a href="file:///C:/Users/cbdue/Desktop/index.html">&laquo; Previous</a>
          <li><a href="file:///C:/Users/cbdue/Desktop/index.html">Index</a></li>
          <li><a href="file:///C:/Users/cbdue/Desktop/resume.html">Resume</a></li>
          <li><a href="https://lichess.org/">Chess</a></li>

      </ul>
    </nav>

    <h3> Work Experience </h3>

    <table>
      <col class="table-heading-column">
      <colgroup>
        <col class="table-data-columns" span="3">
      </colgroup>

      <thead>
        <tr>
          <th rowspan="2">Company</th>
          <th colspan="2">Dates</th>
          <th rowspan="2">Title</th>
        </tr>
        <tr>
          <th>Start</th>
          <th>End</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>The Bistro Restuarant</td>
          <td>June 2004</td>
          <td>Dec 2015</td>
          <td>Manager</td>
        </tr>
        <tr>
          <td>Nagoya International School</td>
          <td>January 2015</td>
          <td>June 2016</td>
          <td>Learning Support Teacher</td>
        </tr>
        <tr>
          <td>International School of Latvia</td>
          <td>July 2016</td>
          <td>June 2018</td>
          <td>Learning Support Teacher</td>
        </tr>

      </tbody>

    </table>
  </div>
</body>

</html>

于 2018-02-03T15:14:29.650 回答