Question

我目前正在使用html5，css和javascript从头开始为我的公司工作。

我有几张桌子，我想单独设置样式，例如差异颜色等。

我试图给他们每个人自己的班级，我已经为我的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 {
}

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

table.contact tr, table.contact td {
}

这是正确的方法。

此外，请考虑更多地了解CSS和HTML5基础知识，因为您似乎缺乏关于其synthax及其工作方式的基本知识。
This 系列文章（初学者部分）最终可能对您有所帮助。

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

1 个答案: