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

请参阅：jsfiddle.net/pxxR7/和jsfiddle.net/pxxR7/1/

Answer 1

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

display: none和display: inline不起作用的原因是因为容器上的display: none会阻止它及其所有内容显示，即使您尝试将其设置为任何内容else（加号，time默认情况下已显示inline。

Answer 2

当然，

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

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

Answer 3

您可以使用font-size DEMO

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