如何避免使用CSS属性选择器的JavaScript

Question

我试图用role =“metadata”和与第一个发生的tr相同的data-group-id隐藏后续的tr。

我不能在这里使用JavaScript，我试图使用纯CSS实现这一点。

<table>
    <tbody>
        <!-- BEGIN this tr should be visible -->
        <tr data-group-id="1" role="metadata">
            <td>
                First rows group title
            </td>
        </tr>
        <!-- END this tr should be visible -->
        <tr data-group-id="1" role="data">
            <td>
                Row belonging to group 1
            </td>
        </tr>
        <!-- BEGIN this tr should be hidden -->
        <tr data-group-id="1" role="metadata">
            <td>
                Rows group title
            </td>
        </tr>
        <!-- END this tr should be hidden -->
        <tr data-group-id="1" role="data">
            <td>
                Another row belonging to group 1
            </td>
        </tr>
        <!-- BEGIN this tr should be visible -->
        <tr data-group-id="2" role="metadata">
            <td>
                Second rows group title
            </td>
        </tr>
        <!-- END this tr should be visible -->
        <tr data-group-id="2" role="data">
            <td>
                Row belonging to group 2
            </td>
        </tr>
    </tbody>
</table>

这样的选择器......

[data-group-id="1"][role~="metadata"] ~ [data-group-id="1"][role~="metadata"]
    display: none

...工作得很好，除了data-group-id可能会动态变化。

像这样的东西是完美的（我知道这是无效的CSS代码，它只是我的幻想与正则表达式，以帮助说明问题）：

[data-group-id="(.*?)"][role~="metadata"] ~ [data-group-id="\\1"][role~="metadata"]

有没有什么办法可以用CSS来实现这个目的？

提前致谢。

Answer 1

在我看来，在CSS中使用data-group-id是不切实际的，特别是因为它是动态可变的，并且隐藏或不改变元素的条件。 你最终得到了一大堆无法维护的CSS。

在初始渲染中，最好添加一个className以便确定应该显示初始状态的服务器端。

<tr data-group-id="1" role="data" class="hidden">
    <td>Another row belonging to group 1</td>
</tr>

我假设JavaScript用于动态更改data-group-id ，所以为什么不在有意义的时候使用JavaScript来添加/删除className “hidden”。 至少在JavaScript中你可以使用正则表达式;）

当你到达必须编写不可能的，冗长的，容易出错且不可维护的CSS表达式时，你做错了什么。

无论如何，你将不得不编写一些代码来实现这一点，不妨尝试将它变成一种不适合工作的样式语言。