Seletor de identificação no CSS

O seletor de identificação utilizou os atributos de identificação do elemento para atingir um elemento específico. Como um documento HTML deve ter um ID único de um elemento, portanto, o seletor de ID tem como alvo um elemento único. É muito útil nesses cenários onde são necessárias mudanças detalhadas. Quando há necessidade de implementar o estilo para um elemento único e específico, um seletor de tipo como seletor de identificação pode ser utilizado.

Por exemplo, se você precisar alterar a cor do texto de todos

elementos então seletor de elementos pode ser utilizado. No entanto, quando você tem que segmentar um único

tag então um seletor mais específico será necessário, como um seletor de identificação.

Sintaxe

O seletor de identificação é descrito com o sinal # seguido pelo ID do elemento.

#idName CSS Properties

Regras para implementar o seletor de identificação

Existem algumas regras a seguir para lidar com os seletores de identificação.

A primeira regra a seguir ao lidar com o seletor de identificação é que ele deve ter pelo menos um personagem e não pode começar com um número. Por exemplo:

Na mesma página, vários elementos HTML não podem ter o mesmo eu ia:

Se um elemento tiver um ID, deve ser único:

A regra final é que o nome de identificação e valor da propriedade deve ser o mesmo:

Agora considere o exemplo a seguir com o ID "Style":

Seletor de identificação

Bem -vindo ao Linuxhint.com

segundo parágrafo

No trecho acima, um dos

elementos são estilizados de acordo com o ID "Style". Portanto, as propriedades do #style se aplicarão apenas nisso

Elemento como mostrado na saída abaixo:

O seletor de identificação pode ser usado em vários elementos HTML, como imagens, parágrafos, títulos, etc.

Especificidade do CSS

A especificidade do CSS é um conjunto de regras usando o qual o navegador da web determina qual propriedade é mais adequada/apropriada a um elemento. No CSS, o seletor de identificação tem a maior especificidade entre todos os outros seletores devido à sua singularidade.

Por exemplo, o código dado abaixo tem dois estilos apontando para o mesmo elemento i.e.


<

Seletor de identificação

Bem -vindo ao Linuxhint.com

segundo parágrafo

Como o estilo de classe é declarado primeiro e o parágrafo está apontando para o estilo de "classe" primeiro, o navegador aplicará o estilo do seletor de classe?

Não! O navegador determinará a especificidade desses seletores. Como o seletor de identificação possui maior especificidade, ele implementará as propriedades usando o seletor de ID, como mostrado na saída:

Conclusão:

O CSS ID Seletor usou o atributo de acesso para dar estilo a um elemento HTML específico. A singularidade torna a prioridade do seletor de identificação em relação a outros seletores. Tem maior especificidade em comparação com todos os outros seletores. Esta redação forneceu um entendimento detalhado do seletor de identificação, sua sintaxe, algumas regras que devem ser seguidas ao lidar com seletores de identificação e, por fim, forneceu as orientações sobre a especificidade do CSS.