Como usar o: selector não () em CSS3

Em alguns casos, é mais fácil para selecionar objetos em CSS3 acordo com as características que eles não tem - para fazer isso, você pode usar um: não (selector). Por exemplo, você pode querer alterar a formatação de cada objeto que não se encontra numa

tag.

Neste caso, você pode criar uma lista de tags usando o seletor de vírgula e esperamos que sua lista está completa, ou você pode simplesmente usar o: selector não (). Por exemplo,: não (p) selecciona todos os objectos que não é um

tag. Você também pode criar seleções complexas usando o: não () seletor: Um seletor de: não (divgt; p), por exemplo, seleciona todos os

tag que não tem um

tag como um dos pais.

Mesmo com esta pequena lista de seletores de tag, você pode ver que CSS é bastante flexível quando se trabalha com tags. Vendo os seletores em ação irá ajudá-lo a compreendê-los um pouco melhor. O procedimento a seguir mostra como usar as várias tags:

criar o arquivos ExternalCSS.HTML e ExternalCSS.CSS e copiá-los para uma nova pasta.

Abrir ExternalCSS.HTML.

Digite o seguinte código após o já existente

marca no arquivo e salvar as alterações no disco.

Texto dentro de um DIV.

Texto com um pai DIV.

Texto depois de um DIV.

Mais texto depois de uma DIV.

Este código simplesmente adiciona marcas em arranjos específicos para que você possa testar os vários seletores. Se você abrir o arquivo resultante agora, você vê que cada um dos

Tag foi automaticamente formatado como o original

tag.

Abrir ExternalCSS.CSS.

Digite o seguinte código após os estilos existentes e salvar as alterações no disco.

divgt; p {text-align: right;} inserir a imagem PARA 2,2 AQUI

Atualizar a página de teste.

Observe que a única

tag que tem sido afetada é a que tem o

tag como um pai directa. Além disso, observe que as cascatas de formatação anteriores para a formatação atual. Você não tiver substituído qualquer um a formatação existente, de modo que o texto aparece como antes - ele simplesmente usa direita; justificação em vez do padrão esquerda; justificação.

Digite o seguinte código após os estilos existentes e salvar as alterações no disco.

div p {text-decoration: line-through-background-color: # ff7f7f-}

Atualizar a página de teste.

Observe que duas linhas são afetados neste momento. Além disso, o estilo de background-color foi alterada, de modo que estas duas linhas usar a nova cor - ele tem precedência sobre a cor original. Quando você pensa sobre a parte em cascata de CSS, pensar em um fluxo onde as mudanças jusante ter precedência sobre o estado original da água.

Digite o seguinte código após os estilos existentes e salvar as alterações no disco.

div + p {font-family: monospace-font-style: italic-}

Atualizar a página de teste.

Apenas a linha que aparece logo após o

é afectado: A fonte foi alterada para uma fonte com espaçamento uniforme (normalmente reservado para o código) e está em itálico.

Digite o seguinte código após os estilos existentes e salvar as alterações no disco.

div ~ p {font-weight: mais ousado-font-size: 30px; margin: 0px; color: # 7f007f-}

Atualizar a página de teste.

Observe que tanto

tags que aparecem após o

tag são afetados. O tipo de letra agora aparece em negrito e é maior. A cor da fonte também mudou. Especialmente importante nesta parte do exemplo é que a configuração da margem para 0px se livrar do espaço entre linhas branco.