只有类与纯CSS？ [英] only-of-class with pure CSS?

问题描述

如果列表中没有其他 .meta 元素，我需要隐藏 .meta br>
基本上我需要与：only-of-type 相同的行为

所以，如果我有：

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

.meta >

如果我有：

 < table& 
< tr class =meta>< td> lorem< / td>< / tr> 
< tr class =row>< td>行< / td>< / tr> 
< tr class =meta>< td> lorem< / td>< / tr> 
< / table>将显示
  

.meta p>

CSS应该类似于：

  .meta： class {display：none; } 
  

是否可以使用纯CSS？

修改：

我已经尝试过这个标记（没有太多的W3C编译器，但很关心）：

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

使用此CSS：

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

但它不工作（这里我不知道为什么它' t]

解决方案

可能的解决方法可以通过在列表中使用多个 .meta 元素：

 < ul& 
< li class =meta> lorem< / li> 
< li class =row>行< / li> 
< / ul> 
 
< ul> 
< li class =meta> dummy< / li> 
< li class =meta> lorem< / li> 
< li class =row>行< / li> 
< li class =meta> lorem< / li> 
< / ul> 
  

然后，您将向每个项目分配 display：none 属性，只有当您有多个 .meta 兄弟姐妹时才会覆盖它：

  ul> .meta {
 display：none; 
} 
 
 ul> .meta〜.meta {
 display：list-item; 
} 
  

I need to hide .meta elements only if there are not other .meta elements in the list.
Basically I need the same behavior of :only-of-type but for classes.

So, if I have:

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

.meta will be hidden

If I have:

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

.meta will be shown.

The CSS should looks like:

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

Is it possible with pure CSS?

Edit:

I've even tried with this markup (not much W3C compilant but who care):

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

With this CSS:

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

But it doesn't work (and here I've not really idea of why it doesn't)

解决方案

A possibile workaround could be contrived by using a dummy item in those lists which contain more than one .meta element:

<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>

Then you would give to every item the display: none property, and override it only when you have more than one .meta sibling:

ul > .meta {
    display: none;
}

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

这篇关于只有类与纯CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！