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

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

您可以将 li 的 font-size 设置为 0 并赋予它透明的 color，然后将这些属性设置回正常在 a 上:

li.item {
    font-size: 0;
    color: transparent;
}

li.item a {
    font-size: 16px;
    color: #000;
}

这使得 li 文本不可见并且没有任何大小，但保持 a 元素应有的样式。

JSFiddle demo .

请注意，我在这里使用了透明度，因为(据我所知)Safari 在字体大小设置为 0 时无法完全隐藏字体。