1

我希望将与#originalTable 关联的css 应用于#newTable。

大多数样式将与类 .general 相关联，但是，正是这种特定于 ID 的样式让我感到困惑。#originalTable 将保留在 DOM 中，所以我不能只移动 ID。我宁愿不手动迭代每个元素来关联样式，因为大多数样式通常由类 .general 应用。我也不希望在我的样式表中为#newTable 或应用于#newTable 的一些新类复制规则。

如何实现？谢谢

CSS

.general {//some CSS}
.general thead {//some CSS}
.general thead th {//some CSS}

#originalTable {//some CSS}
#originalTable thead {//some CSS}
#originalTable thead th  {//some CSS}

HTML

<table id="originalTable" class="general">
    <thead>
        <tr>
            <th>H1</th>
            <th>H2</th>
            <th>H3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>B1</th>
            <th>B2</th>
            <th>B3</th>
        </tr>
    </tbody>
</table>

<table id="newTable" class="general">
    <thead>
        <tr>
            <th>H1</th>
            <th>H2</th>
            <th>H3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>B1</th>
            <th>B2</th>
            <th>B3</th>
        </tr>
    </tbody>
</table>
4

3 回答 3

2 
#originalTable, #newTable {//some CSS}
#originalTable thead, #newTable thead {//some CSS}
#originalTable thead th, #newTable thead th  {//some CSS}
于 2012-11-12T19:30:30.490 回答
0

您应该将代码更改为：

CSS：

.general {//some CSS}
.general thead {//some CSS}
.general thead th {//some CSS}

.originalTable {//some CSS}
.originalTable thead {//some CSS}
.originalTable thead th  {//some CSS}

HTML：

<table class="general">
    <thead>
        <tr>
            <th>H1</th>
            <th>H2</th>
            <th>H3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>B1</th>
            <th>B2</th>
            <th>B3</th>
        </tr>
    </tbody>
</table>

<table class="general originalTable">
    <thead>
        <tr>
            <th>H1</th>
            <th>H2</th>
            <th>H3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>B1</th>
            <th>B2</th>
            <th>B3</th>
        </tr>
    </tbody>
</table>
于 2012-11-12T19:28:48.647 回答
0

如果您想让所有表都有 CSS 属性，请使用：

table {
    //some CSS code
}

如果您希望所有“通用”表都具有某些属性，请使用：

.general { 
    //some CSS code
}

如果您希望某些“特殊”表具有附加属性，请使用：

.special { 
    //some CSS code 
}

如果您只希望 1 个特定表具有属性，请使用：

#newTable { 
    //some CSS code
}

如果您希望 2 个表具有属性，请使用：

#newTable, #oldTable {
    //some CSS code
}

请注意，可以进一步指定最后一个。例如#newTable head, #oldTable head.

那么你可以有

<table id="newTable" class="general special">
    //some HTML code
</table>
于 2012-11-12T19:33:01.093 回答