html - 如何使用 css 在 html 5 中以不同的方式设置多个表格的样式

我目前正在为我的企业创建一个网站，从头开始使用 html5、css 和 javascript。

我有几张 table ，我想单独设置样式，例如不同的颜色大小等。

我试图给他们每个人自己的类(class)，我已经为我的 css 完成了 table.table1 - 对于所有 3 个，但只有一个 css 正在工作，对于所有 3 个表似乎......我哪里出错了？

<form name="htmlform" method="post" target="taxshop@hotmail" action="html_form_send.php">
  <table class="contact" width="450px">
    <tr>
      <td valign="top">
        <label for="first_name">First Name *</label>
      </td>
      <td valign="top">
        <input  type="text" name="first_name" maxlength="50" size="30">
      </td>
    </tr>
    <tr>
      <td valign="top">
        <label for="last_name">Last Name *</label>
      </td>
      <td valign="top">
        <input  type="text" name="last_name" maxlength="50" size="30">
      </td>
    </tr>
    <tr>
      <td valign="top">
        <label for="email">Email Address *</label>
      </td>
      <td valign="top">
        <input  type="text" name="email" maxlength="80" size="30">
      </td>
    </tr>
    <tr>
      <td valign="top">
        <label for="telephone">Telephone Number</label>
      </td>
      <td valign="top">
        <input  type="text" name="telephone" maxlength="30" size="30">
      </td>
    </tr>
    <tr>
      <td valign="top">
        <label for="comments">Comments *</label>
      </td>
      <td valign="top">
        <textarea  name="comments" maxlength="1000" cols="25" rows="6">
        </textarea>
      </td>
    </tr>
    <tr>
      <td colspan="2" style="text-align:center">
        <input type="submit" value="Submit">
      </td>
    </tr>
  </table>
</form>

我对此表的 CSS 如下:

table.contact tr, td {
  border: 1px solid #ffffff;
  border-collapse: collapse;
  color:#000000;
  background-color: #ffffff;
  font-size: 1em;
  margin: 0;
  margin-bottom: 22px;
  padding: 4px;
  font-style: normal;
  text-align: left;
  border-bottom-style: solid;
  border-bottom-width: 0.25em;
  border-bottom-color: #ffffff;
  border-radius: 0px;
}
table.contact, td {
  padding: 5px;
  text-align: left;
}
table.contact label{
  display:inline-block;
  width:100px;
  margin-right:10px;
  text-align:right;
}

最佳答案

你在第一排犯了一个错误，
https://jsfiddle.net/yvvcspha/1/

table.contact tr, td {
}

此选择器意味着您将样式应用于 ; tr 中的 table.concat ，以及页面上的所有其他 td ，因为逗号分隔选择器。
如果您只想将样式应用于 table.concat 中的 td ，则应使用。 table.contact td 。

table.contact tr, table.contact td {
}

这将是正确的方法。

此外，请考虑更多地了解 CSS 和 HTML5 基础知识，因为您似乎对它们的合成器及其工作方式缺乏一些基本知识。
This 系列文章(入门部分)最终可能对您非常有帮助。

关于html - 如何使用 css 在 html 5 中以不同的方式设置多个表格的样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36740027/