只有纯CSS的课程?

时间:2014-04-15 07:45:53

标签: css css-selectors

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

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

1 个答案:

答案 0 :(得分:2)

可以通过在包含多个 .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;
}