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

Question

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

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

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

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

Answer 1

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

div:empty {
    display: none;
}

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

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

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

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

Answer 2

div { display: none; }

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

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

Answer 3

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

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

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

Кроме того, почему вы хотите это сделать?

Answer 4

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

Answer 5

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

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

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