隐藏未分类的元素，并显示它的兄弟姐妹？

Question

我有一些我无法修改的HTML代码。我不想使用JS / jQuery来做这件事，想用跨浏览器友好的CSS来完成它。

HTML看起来像这样：

<ul class="list">
    <li class="item">
        <a href-"#">Item One</a> |
    </li>
     <li class="item">
        <a href-"#">Item Two</a> |
    </li>
    <li class="item">
        <a href-"#">Item Three</a> |
    </li>
</ul>

那里有那些愚蠢的管道打破了清单。我想隐藏这些，并显示<a>元素。我不只是想使文本颜色与背景相同。我想要相当于display: none;

Answer 1

您可以将font-size的{​​{1}}设置为0并为其指定透明li，然后在color上将这些属性设置为正常：

a

这会使li.item { font-size: 0; color: transparent; } li.item a { font-size: 16px; color: #000; } 文本不可见，并且没有任何大小，但保持li元素的样式。

JSFiddle demo

请注意，我在这里使用了透明度（据我记得）当Safari的大小设置为0时，Safari完全隐藏了这个字体。

Answer 2

简单地：

.item {
    color: transparent;
}

.item a {
    color: #000;
}

JS Fiddle demo

这意味着li的文本不可见/透明（尽管仍然可以选择），但a元素的文本颜色可见。