如何给表内的所有控件一个特定的样式

Question

我有一个这样的表

<table class="row col-lg-offset-1 thumbnail">
    <tr>
        <td class="col-lg-2">First Name</td>
        <td class="col-lg-6">
            <asp:TextBox ID="TextBox1" CssClass="form-control" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="col-lg-2">Last Name</td>
        <td class="col-lg-6">
            <asp:TextBox ID="TextBox2" CssClass="form-control" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="col-lg-2">E-Mail</td>
        <td class="col-lg-6">
            <asp:TextBox ID="TextBox5" CssClass="form-control form-group" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td colspan="2" class="text-center">
            <asp:Button ID="Button1" CssClass="btn btn-warning" Text="Submit" OnClientClick="return ValidateForm();" OnClick="btnSubmit_OnClick" runat="server" />
        </td>
    </tr>
</table>

现在我想给td里面的每个控件一个特定的样式。在这种情况下，Asp:文本框和Asp:按钮。在这种情况下，我该如何写css呢?

Answer 1

我看到CSS-classes - use it

.form-control {
    ...
}
.form-control {
    ...
}
.btn {
    ...
}

或添加自己的

Answer 2

对于文本框

table input[type="text"]{
}

为按钮

table input[type="submit"]{
}

或者给每个tr一个自己的ID并使用它

Answer 3

当您为所有内部元素维护类时试试这个

table .form-control {
    //Your rule for input fields
}
table .btn {
    //Your rule for button
}

Answer 4

如果你想用'form-control'类改变所有表单字段的样式

.form-control {
  border:1px solid #ccc;
  background:#fff;
  // etc
}

如果你想改变一个特定字段的样式，你可以使用ID属性作为选择器，例如，对于你代码中的Email字段:

#TextBox5 {
  color:#fff;
  // etc
}

对于按钮，这里有一个btn类，所以

.btn { 
  border:3px solid red;
  background:#fff;
  border-radius:7px;
  // etc
}