Question

仅当列表中没有其他.meta元素时，我才需要隐藏.meta元素。
基本上我需要:only-of-type的相同行为，但对于类。

所以，如果我有：

<table>
    <tr class="meta"><td>lorem</td></tr>
    <tr class="row"><td>row</td></tr>
</table>

.meta将被隐藏

如果我有：

<table>
    <tr class="meta"><td>lorem</td></tr>
    <tr class="row"><td>row</td></tr>
    <tr class="meta"><td>lorem</td></tr>
</table>

.meta将会显示。

CSS应如下所示：

.meta:only-of-class { display: none; }

纯CSS可以吗？

修改

我甚至尝试过这个标记（W3C并不多，但是很关心）：

<table>
    <tr><th class="meta"><lorem</th><tr>
    <tr class="row"><td>row</td></tr>
</table>

使用这个CSS：

th:only-of-type { display: none; }

但它不起作用（这里我并不知道为什么不这样做）

Answer 1

可以通过在包含多个 .meta 元素的列表中使用虚拟项来设计可能的解决方法：

<ul>
    <li class="meta">lorem</li>
    <li class="row">row</li>
</ul>

<ul>
    <li class="meta">dummy</li>
    <li class="meta">lorem</li>
    <li class="row">row</li>
    <li class="meta">lorem</li>
</ul>

然后你会给每个项目 display：none 属性，并且只有当你有多个 .meta 兄弟时才覆盖它：

ul > .meta {
    display: none;
}

ul > .meta ~ .meta {
    display: list-item;
}

只有纯CSS的课程？

1 个答案: