Qual é a diferença entre um id e uma classe?
https://stackoverflow.com/questions/544010
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Qual é a diferença entre <div class=""> e <div id=""> quando se trata de CSS? Está tudo bem para uso <div id="">?
Eu vejo diferentes desenvolvedores fazendo isso em ambos os sentidos, e desde que eu sou autodidata, eu realmente nunca percebi isso.
Solução
ids deve ser exclusivo onde, como class pode ser aplicada a muitas coisas. Em CSS, ids parecer #elementID e class elementos parecer .someClass
Em geral, o uso id sempre que quiser para se referir a um elemento e class específica quando você tem uma série de coisas que são todos iguais. Por exemplo, elementos id comuns são coisas como header, footer, sidebar. elementos class comuns são coisas como highlight ou external-link.
É uma boa idéia para ler sobre a cascata e compreender a prioridade atribuída a vários seletores: http://www.w3.org/TR/CSS2/cascade.html
A precedência mais básicas que você deve compreender, no entanto, é que seletores id ter precedência sobre seletores class. Se você tivesse o seguinte:
<p id="intro" class="foo">Hello!</p>
e
#intro { color: red }
.foo { color: blue }
O texto será vermelho porque o seletor id tem precedência sobre o seletor class.
Outras dicas
Talvez uma analogia vai ajudar a compreender a diferença:
<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />
Student id cartões são distintos. Não há duas estudantes no campus terá o mesmo aluno ID cartão. No entanto, muitos estudantes podem e irão compartilhar pelo menos uma Class uns com os outros.
Não há problema em colocar vários alunos sob um Class título, tais como Biologia. Mas nunca é aceitável colocar vários alunos sob um aluno ID .
Ao dar Regras sobre o sistema escolar interfone, você pode dar Regras para Class :
"Amanhã, todos os alunos estão a usar uma camisa vermelha para a aula de Biologia."
.Biology {
color: red;
}
Ou você pode dar regras a um aluno específico, chamando sua única ID :
"Jonathan Sampson é vestir uma camisa verde amanhã."
#JonathanSampson {
color: green;
}
Neste caso, Jonathan Sampson está recebendo dois comandos: um como um aluno na aula de Biologia, e outro como uma exigência direta. Porque Jonathan foi dito diretamente, através do atributo id, para vestir uma camisa verde, ele irá ignorar o pedido mais cedo para vestir uma camisa vermelha.
Os seletores mais específicos ganhar.
Onde usar um ID versus uma classe
A simples diferença entre os dois é que enquanto uma classe pode ser usado repetidamente em uma página, um ID deve ser usado apenas uma vez por página. Portanto, é apropriado usar um ID no elemento div que está marcando-se o conteúdo principal da página, como só haverá uma seção de conteúdo principal. Em contraste, você deve usar uma classe para configurar cores de linha alternadas em uma mesa, como eles são, por definição, vai ser usado mais de uma vez.
IDs são uma ferramenta incrivelmente poderosa. Um elemento com um ID pode ser alvo de um pedaço de JavaScript que manipula o elemento ou o seu conteúdo de alguma forma. O atributo ID pode ser usado como o destino de uma ligação interna, substituindo marcas de âncora com atributos de nome. Finalmente, se você faz seus IDs clara e lógica, eles podem servir como uma espécie de “auto-documentação” dentro do documento. Por exemplo, você não precisa necessariamente adicionar um comentário antes de um bloco afirmando que um bloco de código irá conter o conteúdo principal se o tag do bloco de abertura tem um ID de, digamos, "cabeçalho", "footer "main" ", etc.
Um ID deve ser único em toda a página.
Uma classe pode aplicar-se a muitos elementos.
Às vezes, é uma boa idéia para ids de uso.
Em uma página, você geralmente tem um rodapé, um cabeçalho ...
Em seguida, o rodapé pode ser em um div com um id
e ainda tem uma classe
IDs são únicos. As classes não são. Elementos também pode ter várias classes. Também as classes podem ser adicionados dinamicamente e removido para um elemento.
Em qualquer lugar você pode usar um ID você pode usar uma classe em vez. O inverso não é verdadeiro.
A convenção parece ser a de usar IDs para elementos de página que estão em cada página (como "barra de navegação" ou "menu") e classes para tudo o mais, mas este é apenas convenção e você encontrará grande variação no uso.
Uma outra diferença é que, para elementos de entrada de formulário, as referências do elemento <label> um campo de ID para que você precisa usar IDs se você estiver indo para usar <label>. é uma coisa acessibilidade e você realmente deve usá-lo.
Em anos passados ??IDs também foram preferidos porque eles são facilmente acessíveis em Javascript (getElementById). Com o advento da jQuery e outros Javascript Estruturas isso é muito bonito um não-problema agora.
As aulas são como categorias. Muitos elementos HTML pode pertencer a uma classe, e um elemento HTML pode ter mais de uma classe. As aulas são usadas para aplicar estilos gerais ou estilos que podem ser aplicados em vários elementos HTML.
IDs são identificadores. Eles são únicos; ninguém mais está autorizado a ter o mesmo ID. IDs são usados ??para aplicar estilos a um elemento HTML.
Eu uso IDs e classes desta maneira:
<div id="header">
<h1>I am a header!</h1>
<p>I am subtext for a header!</p>
</div>
<div id="content">
<div class="section">
<p>I am a section!</p>
</div>
<div class="section special">
<p>I am a section!</p>
</div>
<div class="section">
<p>I am a section!</p>
</div>
</div>
Neste exemplo, as seções de cabeçalho e conteúdo pode ser denominado via #header e #content. Cada seção do conteúdo pode ser aplicado um estilo comum através .section #content. Apenas por diversão, eu adicionei uma classe "especial" para a parte do meio. Suponha que você queira uma seção específica para ter um estilo especial. Isto pode ser conseguido com a classe .Especial, mas a seção ainda herda os estilos comuns de .section #content.
Quando eu faço JavaScript ou desenvolvimento CSS, eu normalmente usam IDs para acessar / manipular um elemento HTML muito específico, e eu usar classes para acessar / aplicar estilos a uma ampla gama de elementos.
CSS é orientada a objeto. ID diz instância, classe diz classe.
espaço seletor CSS realmente permite estilo id condicional:
h1#my-id {color:red}
p#my-id {color:blue}
Render como esperado. Por que você faria isso? Às vezes IDs são gerados dinamicamente, etc. A utilização ainda tem consistido em tornar títulos de forma diferente com base em um trabalho de alto nível ID:
body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}
Pessoalmente, eu prefiro seletores classname mais longos:
body#list-page .title-block > h1 {font-size:56px}
como eu encontrar usando IDs aninhados ao tratamento diferenciado a ser um pouco perverso. Só sei que, como desenvolvedores no Sass / SCSS mundo ter em suas mãos este material, IDs aninhados estão se tornando a norma.
Finalmente, quando se trata de desempenho seletor e precedência, ID tende a vencer. Este é um outro assunto.
Ao aplicar CSS, aplicá-lo a uma classe e tentar evitar, tanto quanto possível para um id. O ID só deve ser usado em JavaScript para buscar o elemento ou para qualquer evento obrigatório.
As aulas devem ser usados ??para aplicar CSS.
Às vezes você tem que usar classes para a ligação evento. Nesses casos, para tentar evitar as classes que estão sendo usados ??para aplicar CSS e em vez adicionar novas classes que não têm correspondentes CSS. Isto virá para ajudar quando você precisa mudar o CSS para qualquer classe ou alterar o nome da classe CSS todos juntos para qualquer elemento.
Qualquer elemento pode ter uma classe ou um ID.
A classe é usada para fazer referência a um certo tipo de exposição, por exemplo, você pode ter uma classe css para um div que representa a resposta a esta pergunta. Como haverá muitas respostas, vários divs seria necessário o mesmo estilo e você usaria uma classe.
Um id refere-se a apenas um único elemento, por exemplo, a seção relacionada à direita pode ter denominar específico para não reutilizadas em outro lugar, seria usar um id.
Tecnicamente, você pode usar classes para tudo isso, ou dividi-los logicamente. Você não pode, no entanto, a reutilização id é de vários elementos.
Class é para aplicar seu estilo a um grupo de elementos. estilos ID aplica a apenas o elemento com esse ID (deve haver apenas um). Normalmente você usa classes, mas se há um one-off você pode usar IDs (ou apenas furar o estilo direto para o elemento).
Em desenvolvimento avançado id S podemos basicamente usar JavaScript.
Para fins repetíveis, class es vir a calhar ao contrário do id s que deveriam ser único.
A seguir é um exemplo que ilustra as expressões acima:
<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>
Agora você pode ver aqui box e box1 são dois (2) diferente <div> elementos, mas podemos aplicar as classes box e bg-color-red para ambos.
O conceito é herança em uma href="http://en.wikipedia.org/wiki/Object-oriented_programming" rel="nofollow noreferrer"> linguagem OOP
1) div id não é reutilizável e só deve ser aplicada a um elemento do HTML enquanto div class pode ser adicionado a vários elementos.
2) Um ID tem maior importância, se ambos são aplicados ao mesmo elemento e ter conflitantes estilos, os estilos do id será aplicada.
3) Estilo elemento referem-se sempre uma classe div colocando um. (Ponto) na frente de seus nomes, enquanto div class id é conhecido por colocar um # (cardinal) na frente de seus nomes.
4) Exemplo: -
classe na declaração
<style>-.red-background { background-color: red; }id na declaração
<style>-#blue-background {background-color: blue;}
<div class="red-background" id="blue-background">Hello</div>Aqui fundo será na cor azul
