Свернуть div и p с помощью CSS

StackOverflow https://stackoverflow.com/questions/1304009

  •  19-09-2019
  •  | 
  •  

Вопрос

Как вы можете свернуть div и p -элементы, если они пусты с помощью CSS, так что теги не отображаются для пользователя в исходном коде?

Эти элементы есть в моем исходном коде, хотя они пусты.Это приводит к ошибкам в работе остальной части сайта.

Я запускаю это безуспешно

div.unsuccessful,
div.unsuccessful p {
    visibility: collapse;                                                                                                                                                                                      
}

Это наводит меня на мысль, что вы, по-видимому, не можете сделать такую вещь с помощью CSS.Возможно, необходим другой инструмент, такой как PHP.

Это было полезно?

Решение

CSS не оказывает никакого влияния на фактический HTML-код, поэтому это невозможно сделать.В (готовящемся) CSS3 вы могли бы запретить их визуализацию с помощью :empty псевдокласс:

div:empty {
    display: none;
}

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

Лучший вариант - удалить их на сервере, используя язык сценариев, такой как PHP.Я полагаю , вы мог бы сделайте это на стороне клиента с помощью JavaScript, но это ужасное решение, имо.

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

Кроме того, будьте осторожны.Пустые теги не всегда бессмысленны.Фактически, удаляя все пустые <div> что-то там может считаться вредным.

Другие советы

Да, если вы хотите остановить их пребывание в источник, вам нужно будет внести соответствующие изменения в ваш серверный код.В качестве альтернативы, вы также можете установить HTML в JavaScript, но, вероятно, это не рекомендуемый подход к данной проблеме.Возможно, вам захочется сказать немного больше о том, что вы пытаетесь сделать.

Свойство Visibility предназначено для установки того, будет ли отображаться содержимое объекта или нет.Это не приведет к удалению элемента изнутри DOM.

свернуть Новое для Windows Internet Проводник 8

Используется в таблицах для удаления строк и столбцов;для всех остальных элементов - то же, что и hidden.

И еще, почему вы хотите это сделать?

div { display: none; }

полностью удаляет элемент со страницы.

Это все равно будет отображаться в вашем исходный код, независимо от того, что вы делаете с CSS.Браузер объединяет исходный код HTML и директивы CSS в отображаемую страницу, исходный код не изменяется.CSS может влиять только на визуальное отображение элементов, он не может изменять элементы.Чтобы на самом деле удалить элементы из DOM, вам понадобится Javascript (или не помещать туда элементы в первую очередь).

Да, вам придется использовать обработку на стороне сервера, чтобы показать или нет-показать какой-то код пользователю:

if ($showAdminLink) {
    echo "<p><a href=\"admin.php\">Admin panel</a></p>";
}

Независимо от того, какие трюки вы пробуете, все, что сделано на стороне клиента (HTML, Javascript, CSS), может быть изменено и воспроизведено.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top