Latest web development tutorials

Uma combinação de seletores CSS

Uma combinação de seletores CSS

nota seletores de combinação ilustrar a relação direta entre os dois seletores.

seletores CSS incluem uma combinação de várias combinações de seletores simples.

Em CSS3 que contém quatro combinações:

  • seletor descendente (separados por espaços)
  • selector elemento filho (maior que delimitado)
  • seletor irmão adjacente (mais delimitado)
  • selector irmão Ordinária (separadas por um traço)

Offspring Picker

seletor descendente corresponde a todos os elementos de elementos descendentes dignos.

O exemplo a seguir seleciona todos os elementos <p> no elemento <div>:

Exemplos

div p
{
background-color:yellow;
}

tente »

seletores filho

Comparado com seletores descendentes, sub-selectores (seletores filho) pode selecionar um elemento como um elemento filho do elemento.

Os exemplos a seguir selecionados elemento <div> em todos os elementos filhos diretos <p>:

Exemplos

div>p
{
background-color:yellow;
}

tente »

Selector Irmãos adjacente

seletor irmão adjacente (seletor irmão adjacente) escolher outro elemento imediatamente após o elemento, e ambos têm o mesmo elemento pai.

Se você precisa selecionar outro elemento imediatamente após o elemento, e ambos têm o mesmo elemento pai, você pode usar o seletor irmão adjacente (seletor irmão adjacente).

O exemplo a seguir seleciona todo o primeiro no elemento <div> depois do elemento <p>:

Exemplos

div+p
{
background-color:yellow;
}

tente »

selectores relacionados adjacentes comuns

seletor irmão adjacente comum para selecionar todos os elementos irmãos especificados.

O exemplo a seguir seleciona todos os elementos <div> de todos os irmãos ao lado <p>:

Exemplos

div~p
{
background-color:yellow;
}

tente »