不在标签中的文本的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>

这段代码不起作用，因为它只隐藏了a标签，而未隐藏其他文本：

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

这并不起作用，因为它会隐藏所有内容：

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

这种方法可以实现，但不是最理想的，因为您还需要处理隐藏空格：

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

参见：jsfiddle.net/pxxR7/ 和 jsfiddle.net/pxxR7/1/

- ryanve

Answer 1

在CSS中，只能选择元素，而不能选择裸文本。这就是为什么:not(time)无法使用（它只选择了a）的原因。

display: none 和 display: inline 无法生效的原因是，对于一个容器使用 display:none 将会阻止它及其所有内容的显示，即使您试图设置其他任何属性也是如此（另外，time默认已经显示为 inline）。

- BoltClock

Answer 2

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

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

- Chris

---

“normal” 不是 “font-size” 的有效值。你可能想用的是 “medium”，或者一个像素值。（绝对不是 “1em” 或 “100%”，因为显然会有问题...） - BoltClock

@BoltClock 没错，谢谢！我总是把 font-size 和 font-weight 搞混。 - Chris

我建议还将 .byline 元素的 color 设置为 transparent（然后再重置元素以显示），因为我记得 IE 在使用 0px 作为字体大小时会出现一些问题。 - David Thomas

@DavidThomas 当然，我记得在IE7中看到过这样的问题。 - Chris

演示在这里：http://jsfiddle.net/Vzjry/ - Jasper

和 Champ 的回答一样的问题（请看我在那里的评论）。 - FelipeAls

Answer 3

您可以使用字体大小演示

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

- GajendraSinghParihar

---

例如，屏幕阅读器仍将读取它（因此无法访问），并且会在Google总部触发一些红色警报，存在被列入黑名单的风险（这不是确定的，因为黑名单是在机器人自动标记后进行手动审核的，但OP最好知道他正在冒险）。 - FelipeAls

如果它不是意味着要被任何人阅读的，或者CSS被禁用了，那么它就是无法访问的。 - FelipeAls

@FelipeAls 我同意这不是理想的做法，应该谨慎使用。 - ryanve