Question

我有一组跨页面的表，总是称为tblData。我希望能够为表格中的elemenets设置CSS属性，例如标签，列样式，文本等。

目前我正在这样做

#tblData{
style...}

.dataColumn{
style...}

但是我想以某种方式将它们整合到tblData类中，所以我只需要添加这个类来完成布局。

这是我必须尝试设置文本框和标签的样式，但标签和文本框元素不起作用：

.tblData {
    border: solid;
    border-width: 1px;
    height: 200px;
    color: rgb(45,40,128);
    background-color: white;
    width: 100%;
    border-radius:3px;
    margin-top:3px;

}
/*Class for the labels*/
.tblData label {
    width: 13%;
    color:black;
    border-radius:3px;
    font-family:verdana;
    border-radius:3px;
    border-color:rgba(45,40,128,0.75);
    border-width:1px;

}
/*Class for the data textboxes*/
.tblData textbox {
    border-color: rgba(45,40,128,0.75);
    border-width: 1px;
    background-color:rgba(45,40,128,0.10);
    font-family:Verdana;
    border-radius:3px;
}

这是一个表格示例（注意不完整，因为它太大了）

  <table id="ContactsTable" class="tblData">
        <tr>
            <td class="auto-style1">
                <asp:Label ID="lblContact" runat="server" Text="Contact" CssClass="Datalabelcolumn"></asp:Label></td>
            <td>
                <asp:TextBox ID="TextBox1" runat="server" CssClass="Datatextbox" Width="200px"></asp:TextBox>
            </td>
            <td></td>
            <td></td>
            <td></td>

Answer 1

如果您只希望将一个类应用于表本身，则可以添加特定的CSS选择器来隔离表本身的某些元素，例如行或列，例如：

#tblData td{

/* sets cell styling */

}

#tblData tr{

/* sets row styling */

}

#tblData th{

/* sets head styling */

}

#tblData tr td:first-child{

/* sets styling of first column  */

}

#tblData tr td:last-child{

/* sets styling of last column  */

}

#tblData tr td:nth-child(n){

/* sets styling of specific column (change n to number)  */

}

上面基本上说采用id为tblData的元素，然后选择适合以下选择器的子元素。如果需要了解更多信息，可能还需要查看W3 selector documentation。

这是一个带有一些示例选择器的 FIDDLE 。

如何将CSS添加到另一个对象的一部分？

1 个答案: