Question

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

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

这是我的完整代码：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

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

utf8_enforcer_tag

<input name="utf8" type="hidden" value="✓" />（表＆＃34;单元格＆＃34;）在HTML结构中较低，这意味着上述规则更具体，它将覆盖您的col / colgroup样式。

＆＃13;

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

＆＃13;

td

＆＃13;

HTML col类选择器

1 个答案: