Используйте CSS, чтобы скрыть элементы без привязки

Question

У меня есть контейнер, который выглядит следующим образом

<div id="container">This container has a <a href="#">link</a> in it</div>

Я хочу спрятать в нем все, кроме ссылки.

Я пробовал

#container {display:none;} 
#container a { display:block; }

Но это не работает.

Это стиль пользователя, поэтому у меня есть доступ только к CSS.Нет JavaScriptБез разметки.

Answer 1

Использование visibility будет работать здесь, если вы не возражаете против невидимого, несвязанного текста, все еще занимающего место.

#container {
 visibility: hidden;  
}
#container a {
 visibility:visible;  
}

А если вам нужно имитировать стиль отображения блока, вы можете попробовать:

#container {
 visibility: hidden;   
 position: relative;
}
#container a {
 visibility:visible;  
 position: absolute;
 top: 0;
 left: 0;
}

Answer 2

Это невозможно с кодом, который вы сейчас используете.Поскольку текстовые фрагменты представляют собой текстовые узлы, которые представлены только анонимными встроенными блоками , которые не могут быть стилизованы с помощью display отдельно.

Но если поместить текст, который окружает aэлемент также в элементах, например, span s:

<div id="container"><span>This container has a </span><a href="#">link</a><span> in it</span></div>

Тогда вы можете сделать это:

#container span { display: none; }
#container a { display: block; }