Question

我希望将与#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>

Answer 1

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

Answer 2

您应该将代码更改为：

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>

Answer 3

如果您希望所有表都具有CSS属性，请使用：

table {
    //some CSS code
}

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

.general { 
    //some CSS code
}

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

.special { 
    //some CSS code 
}

如果您只想要一个特定的表来拥有一个属性，请使用：

#newTable { 
    //some CSS code
}

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

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

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

然后你可以

<table id="newTable" class="general special">
    //some HTML code
</table>

将与一个元素的ID相关联的CSS应用于另一个元素

3 个答案: