O exemplo abaixo não funcionará:

O parágrafo e nele gordo elemento, e aqui está inclinado elemento.

Aqui gordo E enfatizou elementos, mais inclinado.

Exemplo mais real

Vejamos como funciona o seletor adjacente usando um exemplo mais realista. Em artigos grandes contendo diversas seções marcadas com tags

, é aconselhável aumentar a margem superior (propriedade margin-top). Um recuo de 30px tornará o texto legível. Mas se a etiqueta

vem logo depois

, e isso pode estar no início do artigo, no recuo superior acima da tag

será redundante. Este problema pode ser resolvido usando um seletor de elemento adjacente.

Aqui está o código HTML com um exemplo de como funciona o seletor de elemento adjacente.

Olá!

Rumo h2

Rumo h2

O texto do parágrafo é sobre aventuras incríveis.

Rumo h2

O texto do parágrafo é sobre aventuras incríveis.

Rumo h2

O texto do parágrafo é sobre aventuras incríveis.

Além disso, usando a ferramenta de seleção adjacente, é conveniente ajustar o recuo entre o título e o primeiro parágrafo da seção; em nosso exemplo, são tags

E

Vale ressaltar também que para reduzir o recuo é conveniente utilizar valores negativos.

Olá!

Rumo h2

O texto do parágrafo é sobre aventuras incríveis.

Rumo h2

O texto do parágrafo é sobre aventuras incríveis.

Rumo h2

O texto do parágrafo é sobre aventuras incríveis.

Rumo h2

O texto do parágrafo é sobre aventuras incríveis.

Agora um exemplo de como usar um seletor adjacente para selecionar todos os elementos da lista, exceto o primeiro.

• Item da lista nº 1.
• Liste o item nº 2.
• Liste o item nº 3.
• Liste o item nº 4.

Isto é o que acontecerá como resultado deste exemplo:

Figura 1. Exemplo nº 5 no trabalho.

1º de junho de 2015

Em contrapartida, os vizinhos são usados ​​com menos frequência. A principal diferença é que eles devem seguir um ao outro. Para facilitar a sua compreensão este tópico, proponho analisar esta estrutura:

<тег1> <тег2> <тег3> <тег4> <тег5><тег6>...

Como você provavelmente adivinhou na lição anterior, as tags 2, 3, 4, 5, 6 são seletores de contexto para etiqueta1. Por sua vez, os seletores vizinhos serão: tag2 e tag3, tag4 e tag5, mas ao mesmo tempo etiqueta2 E tag4 não são adjacentes. As propriedades de estilo serão aplicadas ao último elemento especificado como adjacente. Basta seguir a ordem dos seletores. A sintaxe geral de escrita é:

Seletor1 + seletor2+ ...+seletorN ( propriedade1: valor; propriedade2: valor; ... propriedadeN: valor)

Vejamos este exemplo:

Cabeçalho

Marcação pé um seletor adjacente à tag h1

Este texto deve ser verde

Vizinho Seletores CSS

Seletores CSS vizinhos, ou seletores irmãos, como também são chamados, permitem aplicar estilos a um elemento nos casos em que ele aparece antes de um determinado elemento no código HTML, ou seja, os elementos neste caso devem estar no mesmo nível de aninhamento . Os seletores vizinhos também são compostos e consistem em seletores simples (classes, identificadores, etc.).

Para que você entenda claramente o que são elementos adjacentes, vejamos novamente um exemplo familiar, apenas ligeiramente modificado.

<тег1> <тег2>... <тег3><тег4>... <тег5><тег6>...

Neste exemplo existem apenas dois pares de elementos adjacentes - estes são<тег2>E<тег3>, e também<тег3>E<тег5>, Todos. Aquilo é<тег2>E<тег5>não são mais vizinhos entre si, pois entre eles existe<тег3> .

Os seletores adjacentes são formados por dois ou mais seletores regulares separados por um sinal “+” (mais), onde o primeiro elemento do código é indicado primeiro, depois o que vem depois dele, depois aquele que vem imediatamente após o segundo , e assim por diante. Como de costume, os estilos são aplicados ao elemento cujo seletor está em último lugar na lista. Sintaxe geral.

seletor1 + seletor2 ( propriedade: valor; propriedade: valor; ...)

Os espaços em ambos os lados do sinal “+” podem ser colocados ou não, conforme desejado.

Um exemplo de uso de seletores adjacentes em CSS

Cabeçalho

Texto. Forte. Texto. Em.

Texto. Em. Texto. Forte.

Texto. Em. Texto. Forte.

Resultado no navegador

Cabeçalho

Texto. Forte. Texto. Em.

Texto. Em.

Texto. Em.

Texto. Forte. Neste exemplo, apenas o primeiro parágrafo com texto em vermelho e apenas o segundo parágrafo estão sublinhados porque nenhum outro elemento corresponde às regras de estilo. Em particular, o conteúdo do elemento neste caso não será verde, pois está separado do título não por um, mas por dois parágrafos. A propósito, como você pode ver, no segundo estilo os seletores adjacentes e filhos foram especificados ao mesmo tempo. Então decidi lembrar mais uma vez que os seletores tipos diferentes

podem ser combinados livremente.

O Internet Explorer 6.0 não compreende seletores adjacentes (ou seletores filho). Lembre-se disso.

1. Trabalho de casa.
2. Crie um layout regular de duas colunas com um menu na página. Deixe os itens da lista do menu terem marcadores de imagem.