javascript - CSS 选择器不起作用？

Question

我正在使用 Javascript 和 jQuery 创建一个表格，我希望这样当您单击表格第一行上的 td 时，该列中的其余 td 就会下拉。让我尝试通过显示我的代码来解释它。这是我的 JavaScript:

$(document).ready( function() {
    createTr(heights);  
});

function createTr (heights) {
    for (var h=0; h<heights.length; h++) {  // h is row number, i is column number!
        var theTr = $("<tr>", { id: "rowNumber" + h});
        for (var i=0; i<heights.length-3; i++) { // IF EXTRA TD'S ARE SHOWING< CHANGE 3 TO SOMETHING ELSE
            theTr.append($("<td>", { "class": "row"+h + " column"+i,
                                     html: heights[h][i]
                                   }));
        }
        $('#newTable').append(theTr); // append <tr id='rowNumber0'> to the table, which is in the html

        if (h != 0) {
            $('.row' + h).addClass('invisible'); // hide all the rows except the first row
        }
        $('.column0').removeClass('invisible'); // show the first column
        $('.row0').not('.column0').on({
            mouseenter: function() {
                $(this).addClass('column0Hover');
            },
            mouseleave: function() {
                $(this).removeClass('column0Hover');
            }
        });
    } // end for
} // end function

这基本上创建了 td，每个 td 都类似于此格式

<td class="rowh columni">

参数'heights'只是一个数组，例如可以是

var heights = [['headerOne', 'headerTwo'], ['someTd', 'anotherTd'],];

它将使用这些单词创建一个表格，headerOne 和 headerTwo 将位于第一行，someTd 和 anotherTd 将位于第二行。

我希望 .row0 .column0 中的 td 默认背景色为红色。这很奇怪，因为 $('.row0').not('.column0').on({ 没有选择 .row0 的 td。 column0，.row0 选择它，column0 选择它，所以它的类肯定是​​ .row0 .column0，但是，当我转到 CSS 并执行

.row0 .cloumn0 {
    background-color: #063 !important;
}

这不起作用。当我尝试像这样选择它作为查询选择器时

$('.row0 .column0')

它仍然没有选择任何东西。怎么会这样？

Answer 1

.row0 .column0 选择 column0 类的元素，这些元素是 row0 类的元素的后代。

.row0.column0 选择具有类 column0 和 row0 的元素。