gpt4 book ai didi

css - 只有一流的纯 CSS?

转载 作者:行者123 更新时间:2023-11-28 04:33:06 25 4
gpt4 key购买 nike

只有当列表中没有其他 .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; }

但它不起作用(在这里我真的不知道为什么它不起作用)

最佳答案

一种可能的解决方法是在那些包含多个 .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 - 只有一流的纯 CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41639323/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com