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

您可以将 的 设置font-size为li0 并给它一个透明的color，然后在 上将这些属性设置回正常a：

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

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

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

JSFiddle 演示。

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

Answer 2

简单地：

.item {
    color: transparent;
}

.item a {
    color: #000;
}

JS 小提琴演示。

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