Para recolher div e p por CSS

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

  •  19-09-2019
  •  | 
  •  

Pergunta

Como você pode recolher div ep -elements se eles estão vazios por CSS de tal forma que as marcas não são mostrados para o usuário no código fonte?

Estes elementos estão no meu código fonte, embora eles estão vazios. Isso faz com que bugs com o resto do site.

Eu executar este sem sucesso 

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

Isto sugere-me que, aparentemente, não pode fazer uma coisa dessas por CSS. Talvez, é necessária outra ferramenta como o PHP.

Foi útil?

Solução

CSS não tem influência sobre o código HTML real, e isso não pode ser feito. No (próximo) CSS3, você pode impedi-los de que está sendo processado usando o :empty pseudo-classe: 

div:empty {
    display: none;
}

Isso é, naturalmente, não é a mesma coisa, mas ele provavelmente iria corrigir os problemas que você está tendo .. se apenas navegadores realmente apoiaram, que eles não fazer, ainda.

A melhor opção é para removê-los no servidor, usando uma linguagem de scripting como PHP. Eu suponho que você poderia fazê-lo do lado do cliente com JavaScript, mas isso é uma solução horrível, imo.

Dito isto, quais os problemas que você está tendo com estas tags vazias? Por que eles não estão em primeiro lugar? Parece-me que alguns redesenho está em ordem para evitar as tags desnecessárias sejam geradas em primeiro lugar.

Além disso, tenha cuidado. tags vazias nem sempre são sem sentido. Na verdade, a remoção de todo <div> vazio lá fora, pode ser considerado prejudicial.

Outras dicas

Sim, se você quiser pará-los estar em a fonte , você vai precisar fazer as considerações apropriadas no código do servidor. Alternativamente, você também pode definir o HTML em JavaScript, mas não é a abordagem recomendada para este problema, provavelmente. Você pode gostar de dizer um pouco mais, porém, sobre o que você está tentando fazer.

propriedade Visibilidade se destina a definir se o conteúdo do objeto é exibido ou não. Ele não irá remover o elemento de dentro do DOM.

em colapso New para o Windows Internet Explorer 8

Usado em tabelas para linhas e colunas em Remover; para todos os outros elementos, mesmo que escondido.

Além disso, por que você quer fazer isso? 

div { display: none; }

remove um elemento completamente da página.

Ele ainda vai aparecer na sua código-fonte , não importa o que você faz com CSS. As colheitadeiras navegador HTML e as directivas CSS em uma página displayable, a fonte original não é modificada. CSS só pode influenciar a exibição visual de elementos, não pode elementos alter. Para remover realmente elementos do DOM você precisa de Javascript (ou não colocar os elementos lá em primeiro lugar).

Sim, você terá que usar o processamento do lado do servidor para mostrar ou não-mostrar algum código para o usuário: 

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

Não importa o que truques que você tente, nada feito no lado do cliente (HTML, Javascript, CSS) pode ser alterado e jogado.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top