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

Question

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

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

我试着给他们每个人自己的类(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;
}

Answer 1

第一行你错了， https://jsfiddle.net/yvvcspha/1/

table.contact tr, td {
}

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

table.contact tr, table.contact td {
}

这才是正确的做法。

另外，考虑学习更多关于 CSS 和 HTML5 的基础知识，因为您似乎缺乏关于它们的语法及其工作方式的一些基本知识。
<强> This 系列文章(初学者部分)最终可能对您非常有帮助。