Como trabalhar com Seletores padrão CSS3
Em alguns casos, uma seleção que você precisa fazer a CSS3 não tem nada a ver com qualquer tags ou atributos, mas o padrão em que os objetos aparecem na página. Por exemplo, você pode querer selecionar apenas o primeiro objeto, independentemente do que esse objeto poderia ser.
Em alguns casos, você deseja formatar com suplentes de uma lista ou outro elemento de dados repetitivos de alguma maneira para tornar mais fácil para o usuário para ver cada elemento individualmente. A lista a seguir fala sobre seletores padrão que os documentos comumente usados.
:primeira carta: Selecione a primeira letra do objeto especificado. Este seletor é útil na criação de efeitos textuais especiais, tais como capitulares.
É extremamente raro ver a maioria dos seletores padrão usado sozinho, porque você normalmente não quer especialmente formato apenas a primeira letra de cada objeto na página de uma certa maneira. Geralmente, você vê seletores padrão usado em combinação com um seletor de atributo, como o seletor de classe, ou com um seletor de tags particular.
Usando seletores de padrão global pode ter resultados inesperados ou até mesmo causar um aplicativo falhar (dependendo de como o código do aplicativo e interagem CSS).
:primeira linha: Seleciona a primeira linha do objeto especificado.
:antes: Seleciona a área imediatamente antes de o conteúdo do objeto especificado. Este seletor é normalmente associada com a propriedade de conteúdo para inserir algo especial antes de o conteúdo do objeto existente.
:depois de: Seleciona a área imediatamente após o conteúdo do objeto especificado. Este seletor é normalmente associada com a propriedade de conteúdo para inserir algo especial antes de o conteúdo do objeto existente.
: First-of-type: Seleciona o primeiro objeto de um tipo específico.
Mesmo que a especificação não realmente dizer-lhe que você deve fornecer um tipo ou um pai, alguns seletores padrão não irá funcionar sem um. Normalmente você vê o: seletor-de primeira do tipo usado com um seletor de tags, (por exemplo, p: first-of-type), mas também pode ser usado com um seletor de atributo. Todos os outros tipo e padrão criança seletores funcionam da mesma maneira.
: Last-of-type: Seleciona o último objeto de um tipo específico.
: Only-of-type: Selecciona o único objeto de um tipo específico. Se houver mais de um objeto de um tipo particular, em seguida, nenhuma seleção é feita.
: Nth-of-type (Número): Seleciona o objeto especificado de um tipo específico.
: Nth-last-of-type (Número): Seleciona o objeto especificado de um tipo específico, começando a partir do final da lista de objetos.
:primeiro filho: Seleciona o primeiro filho de um objeto especificado. Este seletor é comumente usado para aplicar uma formatação especial para o primeiro item em uma lista ou tabela.
: Last-child: Seleciona o último filho de um pai particular.
:filho único: Selecciona o único filho de um pai particular. Quando um objeto pai tem mais de um filho, nenhuma seleção é feita.
: Nth-child (Número): Selecciona o filho especificado de um dos pais em particular.
: Nth-last-child (Número): Selecciona o filho especificado de um original particular começando a partir do fim da lista de crianças.
seletores padrão pode criar alguns efeitos interessantes em seu site. O procedimento a seguir dá uma olhada rápida no que estes seletores pode fazer. É importante lembrar que você verá seletores, incluindo seletores padrão, com frequência, por isso considero este um ponto de partida.
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 existente
marca no arquivo e salvar as alterações no disco.
- Um
- Dois
- Três
- Quatro
- Cinco
Abrir ExternalCSS.CSS.
Digite o seguinte código após os estilos existentes e salvar as alterações no disco.
.ListItem: first-letter {font-size: xx-large -} ListItem: after {content: " 27A8" de pia batismal-size: x-large-color: Red -} ListItem:.. Nth-child (ímpar) { background-color: LightBlue -} ListItem:. nth-child (2n + 2) {background-color: LightGreen-}Atualizar a página de teste.
Você vê o efeito de fazer a mudança de estilo. Para começar, cada bala começa com um extra-grande letra.
No final de cada bala você vê um personagem seta especial. Observe como o CSS usa 27A8 para criar esta personagem. Ao visualizar gráficos, tais como o que está em ikreator.com e o que está em petterhesselberg.com, você vê estes códigos de caracteres apresentados com uma # Combinação no início. CSS usa os mesmos códigos numéricos, mas depende de uma barra invertida (/).
A: O selector enésimo-criança () pode ser utilizado num certo número de maneiras. Mesmo que o exemplo não mostrá-lo, você pode fornecer um número para selecionar um elemento filho específico. No entanto, este selector também aceita um certo número de outras entradas interessantes. Por exemplo, você pode usar as palavras-chave pares e ímpares para selecionar os objetos pares ou ímpares em uma lista.
Você também pode fornecer uma equação que usa n para indicar o objeto atual. Quando as entradas do navegador 0 para n, por exemplo, a equação torna-se 2 * 0 + 2 ou elemento 2. Se você queria começar com elemento 3 em vez disso, você pode usar 2n + 3. A equação que fornecem pode ser de qualquer complexidade necessária para produzir o resultado desejado.
Neste caso, você adicionar uma lista para a página para permitir a detecção mais fácil de padrões. É claro, os padrões não estão limitados a listas ou tabelas. Você pode usá-los com qualquer arranjo de objetos que poderiam se prestam a seleção por um padrão.