不在标签中的文本的CSS选择器 [英] CSS selector for text not in tags

问题描述

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

I want to totally hide everything in the .byline except the date. Is it possible to do this via CSS w/o modifying the markup? Is there a CSS selector that allows you to target the inner text that's not in tags?

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

这不会不工作，因为它会隐藏 a ，但不会隐藏其他文本:

This does not work b/c it hides the a but not the other text:

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

这不会不工作，因为它会隐藏所有内容:

This does not work b/c it hides everything:

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

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

This works but is not ideal b/c then you have to deal with hiding the space too:

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

请参阅: jsfiddle.net/pxxR7/和推荐答案

，您可以使用字体大小 DEMO

you can use font-size DEMO

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

这篇关于不在标签中的文本的CSS选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！