选择多个表中的标签，同时排除特定表

Question

我在页面上设置了以下表格：

<div id="schedule">
    <table class="tableListings">
        <tbody>
            <tr class="tableDate">
                <td>...</td>
                <td>...</td>
            </tr>
        </tbody>
    </table>
    <table class="tableListings">
        <tbody>
            <tr>
                <td>...</td>
                <td>...</td>
                <td>...</td>
            </tr>
        </tbody>
    </table>
    <table class="tableListings">
        <tbody>
            <tr class="tableDate">
                <td>...</td>
                <td>...</td>
            </tr>
        </tbody>
    </table>
    <table class="tableListings">
        <tbody>
            <tr>
                <td>...</td>
                <td>...</td>
                <td>...</td>
            </tr>
        </tbody>
    </table>
</div>

我需要在<td> <{1}}的{​​{1}}上<table>设置背景颜色 等级<tr>。

我该怎么做？

如果我能用CSS完全做到这一点会更好，但如果它更容易（或必要）我也可以使用jQuery。

Answer 1

试试这个CSS：{for simple case}

table tr:not(.tableDate) td{
   background-color:red;
}

Answer 2

如果我理解正确：

$('td').filter(function(){
    return !$(this).closest('table').find('tr.tableDate').length;
}).css('background-color', '#00f');

选择所有td元素，然后根据最接近的table祖先是否没有tr元素和tableDate类来过滤它们。

但是，如果您只需要父tr拥有该课程（不检查该课程的任何table的整个tr），那么

$('td').filter(function(){
    return !$(this).closest('tr.tableDate');
}).css('background-color', '#00f');

我不确定（除了兼容性原因）为什么你不能只使用:not(.tableDate)，而是为了跨浏览器兼容性：

td {
    background-color: #00f; /* special colour for non-.tableDate descendants */
}

.tableDate td {
    background-color: #fff; /* to override the 'special' colour for those td
                               elements that *are* within a .tableDate element */
}

Answer 3

的 CSS

tr
{
 background-color:blue;   
}
.tableDate
{
     background-color:white;
}

工作演示http://jsfiddle.net/cse_tushar/X9rhS/

Answer 4

如果您只想要一个CSS（3）解决方案，请尝试：

table.tableListings tr:not(.tableDate) td {
    background-color:#999;
}

<强> jsFiddle example

Answer 5

试试这个。它会帮助你.....

        table tr:not(.tableDate) td{
            background-color: yellow;
        }