css - 不在标签中的文本的 CSS 选择器

Question

我想完全隐藏.byline 除日期之外的所有内容。是否可以通过不修改标记的 CSS 来做到这一点？是否有一个 CSS 选择器可以让您定位不在标签中的内部文本？

<p class="byline">
    By <a rel="author" href="#">John Doe</a>
    on <time datetime="2012-10-10" pubdate>2012</time>
</p>

这不起作用b /c 它隐藏a但不是其他文本：

.byline :not(time) { display:none }

这不起作用b /c 它隐藏了所有内容：

.byline { display:none }
.byline time { display:inline }

这可行，但不是理想的 b/c，那么您也必须处理隐藏空间：

.byline { visibility:hidden }
.byline time { visibility:visible }

score 2 · Accepted Answer

CSS 只能选择元素，不能选择纯文本。这就是为什么:not(time)不起作用的原因（它只选择a）。

display: none和display: inline不工作的原因是因为display: none在容器上阻止它及其所有内容显示，即使您尝试将其设置为其他任何内容（另外，默认情况下time已经显示inline）。

score 2 · Accepted Answer

@BoltClock当然是正确的，您不能选择文本，只能选择元素。但是，以下解决方法应该有效：

.byline {
    font-size: 0px;
    color: transparent;
}
.byline time {
    font-size: medium;
    color: black;
}

score 2 · Accepted Answer

2

你可以使用字体大小的演示

.byline {font-size:0px; }
.byline time {font-size:15px}

于 2012-09-28T16:54:42.830 回答

3 回答 3