Question

为代码的长度道歉。我试图隐藏包含$的三个单元格我无法更改html但我可以更改CSS。我试过了：

.extra-details table:nth-child(1) tr:nth-child(-n+4)

但是它也获得了第二个表中的前4行。所以我的问题是，我可以使用CSS来隐藏具有$的单元格/行或者要搜索的内容的建议吗？为简洁起见，已移除了单元格值。

<div class="details_column">
    <div class="column">
        <table cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                       Price
                    </td>
                    <td class="medium ">
                        $
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                        $
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                        $
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="column">
        <table cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

在一行中，仅选择包含<td>元素的$的CSS将是：

div.column:first-child table tr:nth-child(-n+4):not(:nth-child(1)) td:last-child {
    border:2px dashed red;
}

如this fiddle所示。但请注意，这仅在Chrome中进行了测试。

Answer 2

要选择元素的特定首次出现，请使用:first-of-type代替:first-child。使用给定的结构，可以使用以下选择器来实现您的目标：

.details_column > *:first-of-type table tr:nth-child(2) td,
.details_column > *:first-of-type table tr:nth-child(3) td,
.details_column > *:first-of-type table tr:nth-child(4) td {
    background:red;
}

小提琴：http://jsfiddle.net/BaUYF/

CSS的解释：

选择包含 details_column
选择任何第一个类型且包含<table>子元素的元素。
选择第2行，第3行和第4行。这些表格。
选择这些行中的所有单元格
应用样式

注意：建议的选择器可以调整以符合您的确切愿望。我没有使用它，但:not()选择器也可能有用。

隐藏第n个孩子tr

2 个答案: