Question

我正在尝试使用role =“metadata”隐藏后续tr，并使用与第一次发生的tr相同的data-group-id。

我不能在这里使用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“隐藏”。至少在JavaScript中你可以使用正则表达式;）

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

无论如何，你将不得不编写一些代码来实现这一目标，不妨试着用它来制作一种不适合这项工作的造型语言。

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

1 个答案: