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

Question

我有一组跨页面的表，它们总是称为 tblData。我希望能够为表格内的元素设置 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 一些示例选择器。