No CSS 3, suponha que você crie um arquivo HTML contendo a seguinte estrutura de tags:
<div id="nav-primary"></div>
<div id="content-primary"></div>
<div id="content-secondary"></div>
<div id="tertiary-content"></div>
<div id="nav-secondary"></div>
Então, no arquivo CSS
div[id^="nav"] { background:#ff0 }
Observe o " ^ "
CSS controlará [u]div#nav-primary e div#nav-secondary[/u] neste caso. Observe que esses dois rótulos são precedidos por nav , não está claro se ele é separado por "-" ou se o ID corresponde da frente para trás [suor]
div[id$="primário"] { background:#ff0 }
Observe que é " $ "
CSS controlará [u]div#nav-primary e div#content-primary[/u] neste caso. Observe que há primar após essas duas tags. Não está claro se "-" é usado como uma separação ou se o ID é correspondido de trás para frente [suor].
div[id*="conteúdo"] { background:#ff0 }
Observe que é " * "
CSS, neste caso, controlará [u]div#content-primary div#content-secondary e div#tertiary-content[/u]. Observe que todas essas tags contêm conteúdo . Não está claro se elas são separadas por "-" ou se o ID é verificado e correspondido automaticamente [suor].
Parece que o autor disse que essas tags agora são suportadas pelas versões mais recentes de vários navegadores, exceto o IE. Você pode tentar, mas não vou tentar ~ [lol]
div#content-primary:target { esboço:1px sólido #300 }
Observe que " :target "
Neste caso, o CSS controlará o link âncora http: //www.example.com/index.html #content-primary (o link âncora pode ser entendido como um link dentro de uma página web, comparado com o retorno visto em alguma web páginas) topo )
O autor diz que os navegadores Mozilla e Safari agora suportam isso
input[type="text"]:enabled { background:#ffc }
input[type="text"]:desativado { background:#ddd }
Observe que " [type="text"]:enabled "
Este é o CSS que controla o formulário "[u][type="text"][/u]" parece significar que o tipo no formulário é texto. . . O que será [u]type="senha"[/u]?
entrada: verificado { borda: 1px sólido #090 };
Observe que " : verificado "
Este é o CSS que controla o “select” do formulário. . .
O autor diz que os navegadores Opera e Mozilla agora suportam estes
:raiz { plano de fundo:#ff0 }
html { plano de fundo:#ff0 }
Por favor, preste atenção nisso " :root "
Este ":root" é uma tag de nível superior ao html. Você pode ler este artigo escrito por Chidori Ichiba para entender corretamente o html e o corpo. Ele descobriu no artigo que existe um quadro fora do html, hehe ~.
O autor diz que os navegadores Mozilla e Safari agora suportam isso
O próximo : nth-child() é mais interessante, haha~ Você pode colocar números e letras padrão entre colchetes~
p:nth-child(3) { cor:#f00 }
Isto parece significar que com base no primeiro P que aparece, todos os P's que são múltiplos de "3" serão controlados.
p:nth-child(ímpar) { cor:#f00 }
Isto parece significar que com base no primeiro P que aparecer, todos os números ímpares de P serão controlados.
p:nth-child(par) { cor:#f00 }
Isto parece significar que com base no primeiro P que aparecer, todos os P's em números pares serão controlados.
p:nth-filho(3n+0) { cor:#f00 }
p:nth-child(3n) { cor:#f00 }
Essas duas tags são equivalentes, pois o 0 após a primeira não tem efeito. O que significa é que P que é 3 vezes o primeiro P que aparecer será controlado~ (Que reviravolta, HOHO~ [rolleyes]) Em outras palavras. , esse "n" assumirá um valor de 0.1.2.3.4.5.6....~ Tantos P quanto você puder calcular serão controlados. . .
tr:nth-child(2n+11) { background:#ff0 }
Se você entendeu o que foi dito acima, não é difícil de entender, mas o rótulo que ele controla mudou para “tr”. Isso significa que a tabela ficará mais variada. Sinto que todos devem ser bons em aritmética no ensino fundamental e não aprender. bem. Vá para casa rapidamente e aprenda um pouco de aritmética elementar novamente. . . (No entanto, tal rótulo aumenta a eficiência do processamento do computador? [confuso] Espero que minha frustração seja desnecessária...)
p: último filho { background:#ff0 }
A p antes de p é controlado (NND, p vai e vem, atinge pp [suor])
:not(p) { borda:1px sólido #ccc };
Este p não é controlado Significa que usa um estilo próprio. Deve ser usado em conjunto com os anteriores. . .
p ~ ul { background:#ff0 }
ul é exibido com prioridade sobre p. Não sei que método de prioridade é esse. . .
Basicamente, isso é tudo que consigo entender. Você pode acessar os dois sites a seguir para continuar aprendendo. Se eu disser algo errado, lembre-se de me dizer.
www.456berastreet.com/archive/200601/css_3_selectors_explained/
www.w3.org/TR/2005/WD-css3-selectors-20051215/