Html 隐藏第n个孩子

为代码的长度道歉。我试图隐藏包含

$

的三个单元格。我无法更改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>

价格
$
$
$

要选择元素的特定第一次出现，请使用

: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;
}

小提琴：

CSS说明：

• 选择包含类

  详细信息\u列的任何元素

• 选择第一个typem并包含子元素的任意元素
• 选择第二、第三和第四行。这几张桌子
• 选择这些行中的所有单元格
• 应用样式

---

注意：建议的选择器可根据您的具体意愿进行调整。我没有使用它，但是

：not（）

选择器也很有用。

在一行中，仅选择包含

$

元素的

的CSS将是：

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

---

如中所示。但是，请注意，这只在Chrome中测试。

nice。很好！我有一个“啊哈！”的时刻，甚至：）这是，但是选择

td

，其中包含单词Price（编辑）。很抱歉，对于单行解决方案和固定代码，必须给这个@andyb