隐藏第n个孩子tr [英] hiding nth child tr

问题描述

对代码的长度表示歉意.我试图隐藏包含 $ 的三个单元格，但是我无法更改html，但是可以更改CSS.我尝试过:

Apologize for the length of the code. I'm trying to hide the three cells that contain the $ I can't change the html but I can change the CSS. I've tried:

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

但这也将获得第二个表中的前4行.所以我的问题是，是否可以使用CSS隐藏具有 $ 的单元格/行或有关搜索内容的建议?为简洁起见，删除了单元格值.

but that gets the first 4 rows in the second table as well. So my question is this, is there CSS I can use to hide the cell/rows that have the $ or suggestions on something to search for? cell values have been removed for brevity.

<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>

推荐答案

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

In a single line the CSS to select just the <td> containing $ elements would be:

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

如 此小提琴 所示.但是，请注意，这仅在Chrome中进行了测试.

as demonstrated in this fiddle. However, please note that this is only tested in Chrome.

这篇关于隐藏第n个孩子tr的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！