Manual de referência CSS

Regras CSS (RULES)

大全 de Propriedades CSS

CSS + Seletor de irmão adjacente

Seletor de irmão adjacente (+) Entre dois seletores, quando o segundo elemento é seguido imediatamente pelo primeiro elemento e ambos são elementos filhos do mesmo pai, o segundo elemento será selecionado.

Manual completo do seletor CSS

Exemplo online

Selecione todos os <div> seguintes primeiros <p> e primeiros <span> elementos:

Exemplo

<!DOCTYPE　html>
<html>
<title>基础教程网(oldtoolbag.com)</title>
<head>
<style>
div+p
{
fundo-cor: vermelho;
cor: branco;
}
div+span　{
　　fundo-cor: DodgerBlue;
}
</style>
</head>
<body>
<h1>Bem-vindo ao基础教程网(pt.oldtoolbag.com)</h1>
<div>
<p>A nossa URL é: pt.oldtoolbag.com.</p>
<p>O nome do nosso site é:基础教程网.</p>
<span>Demonstração do seletor de irmão adjacente</span>
<span>Demonstração do seletor de irmão adjacente</span>
</div>
<p>Oferecemos várias tutoriais básicos para você aprender, aprenda bem os fundamentos, você pode ir mais longe! </p>
</body>
</html>

Teste e veja ‹/›

Definição e uso

former_element　+　target_element　{　style　properties　}

elemento+elemento　 O seletor de irmão adjacente é usado para selecionar o primeiro elemento subsequente após o elemento especificado (não interno).

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

Todos os navegadores populares suportam elemento+elemento Seletor de irmão adjacente.

Atenção: 　elemento+elementoNo IE8Em execução, deve declarar 　<!DOCTYPE>Manual completo do seletor CSS

Funções CSS Seletor Completo CSS