CSS selector for text not in tags [duplicate]

问题

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>

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 }

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 }

See: jsfiddle.net/pxxR7/ and jsfiddle.net/pxxR7/1/

回答1:

you can use font-size DEMO

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

回答2:

CSS can only select elements, not bare text. That is the reason why :not(time) doesn't work (it only selects the a).

The reason why display: none and display: inline don't work is because display: none on a container prevents it and all of its contents from displaying, even if you try to set it to anything else (plus, time already displays inline by default).

回答3:

@BoltClock is, of course, right that you can't select text, just elements. But, the following workaround should work:

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

来源：https://stackoverflow.com/questions/12644134/css-selector-for-text-not-in-tags

标签

css

css-selectors