Question

有没有办法，如何在CSS中分组选择器？确切地说，让表格包含这样的内容。

<table id="my-table">
    <thead>
        <tr>
            <th><div class="my-div1"></div></th>
            <th><div class="my-div2"></div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><div class="my-div1"></div></td>
            <td><div class="my-div2"></div></td>
        </tr>
    </tbody>
</table>

我想合并这些风格

#my-table tr > th .my-div1,
#my-table tr > td .my-div1 {
    some styles
}

这样的事情

#my-table tr > (th, td) .my-div1 {
    some styles
}

CSS是否支持这样的内容？

Answer 1

CSS默认不支持它。然而，我确信有CSS预处理器可以帮助你解决这个问题。

只需跳过指定th或td并直接跳到课程。

<table id="my-table">
<thead>
    <tr>
        <th><div class="my-div1">A</div></th>
        <th><div class="my-div2">B</div></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><div class="my-div1">C</div></td>
        <td><div class="my-div2">D</div></td>
    </tr>
</tbody>

#my-table tr .my-div1 {
    color: red;
}

http://jsfiddle.net/gdsbLhb2/

CSS合并多个选择器

1 个答案: