Em CSS, qual é a diferença entre "." e "#" ao declarar um conjunto de estilos?

Qual é a diferença entre #e .ao declarar um conjunto de estilos para um elemento e quais são as semânticas que entram em jogo ao decidir qual usar?

Sim, eles são diferentes ...

#é um seletor de ID , usado para segmentar um único elemento específico com um ID exclusivo, porém. é um seletor de classe usado para direcionar vários elementos com uma classe específica. Em outras palavras:

• #foo {}estilizará o único elemento declarado com um atributoid="foo"
• .foo {}estilizará todos os elementos com um atributo class="foo"(você também pode ter várias classes atribuídas a um elemento, basta separá-las com espaços, por exemplo class="foo bar")

Usos típicos

De um modo geral, você usa # para estilizar algo que você sabe que só aparecerá uma vez, por exemplo, coisas como layout de alto nível divs tais barras laterais, áreas de faixa etc.

As classes são usadas onde o estilo é repetido, por exemplo, digamos que você encabeça uma forma especial de cabeçalho para mensagens de erro, você pode criar um estilo h1.error {} que só se aplica a<h1 class="error">

Especificidade

Outro aspecto em que os seletores diferem está em sua especificidade - um seletor de ID é considerado mais específico que o seletor de classe. Isso significa que, quando os estilos entram em conflito com um elemento, os definidos com o seletor mais específico substituem os seletores menos específicos. Por exemplo, dado<div id="sidebar" class="box"> as regras para #sidebarsubstituir regras conflitantes para.box

Saiba mais sobre seletores CSS

Vejo Select Tutorial para obter mais informações sobre seletores de CSS - eles são incrivelmente poderosos e, se sua concepção for simplesmente que "# é usado para DIVs", seria bom ler exatamente como usar CSS de maneira mais eficaz.

EDIT: Parece que o Select Tutorial pode ter ido para o grande site no céu, então tente este link de arquivo .

O #meio que corresponde ao idde um elemento. O .significa o nome da classe:

<div id="myRedText">This will be red.</div>
<div class="blueText">this will be blue.</div>


#myRedText {
    color: red;
}
.blueText {
    color: blue;
}

Observe que, em um documento HTML, o atributo id deve ser exclusivo ; portanto, se você tiver mais de um elemento que precisa de um estilo específico, use um nome de classe.

O ponto ( .) significa um nome de classe enquanto o hash ( #) significa um elemento com um atributo de identificação específico . A classe se aplicará a qualquer elemento decorado com essa classe específica, enquanto o estilo # se aplicará apenas ao elemento com esse ID específico.

Nome da classe:

<style>
   .class { ... }
</style>

<div class="class"></div>
<span class="class></span>
<a href="..." class="class">...</a>

Elemento nomeado:

<style>
   #name { ... }
</style>

<div id="name"></div>

Também é importante notar que, na cascata , um seletor id ( #) é mais específico que ab (. seletor ). Portanto, as regras na instrução id substituirão as regras na instrução de classe.

Por exemplo, se as duas instruções a seguir:

.headline {
  color:red;
  font-size: 3em;
}

#specials {
  color:blue;
  font-style: italic;
}

são aplicados ao mesmo elemento HTML:

<h1 id="specials" class="headline">Today's Specials</h1>

a regra color: blue substituiria a regra color: red .

Algumas extensões rápidas sobre o que já foi dito ...

Um iddeve ser exclusivo, mas você pode usar o mesmo ID para tornar estilos diferentes mais específicos.

Por exemplo, dado esse extrato HTML:

<div id="sidebar">
    <h2>Heading</h2>
    <ul class="menu">
        ...
    </ul>
</div>
<div id="content">
    <h2>Heading</h2>
    ...
</div>
<div id="footer">
    <ul class="menu">
        ...
    </ul>
</div>

Você pode aplicar estilos diferentes com estes:

#sidebar h2
{ ... }

#sidebar .menu
{ ... }

#content h2
{ ... }

#footer .menu
{ ... }

Outra coisa útil a saber: você pode ter várias classes em um elemento, delimitando-as por espaço ...

<ul class="main menu">...</ul>
<ul class="other menu">...</ul>

O que permite que você tenha um estilo comum .menucom estilos específicos usando .main.menue.sub.menu

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }

.class segmenta o seguinte elemento:

<div class="class"></div>

#class segmenta o seguinte elemento:

<div id="class"></div>

Observe que o ID DEVE ser único em todo o documento, enquanto qualquer número de elementos pode compartilhar uma classe.

Como praticamente todo mundo já declarou:

Um ponto ( .) indica uma classe e um hash ( #) indica um ID .

A diferença fundamental é que você pode reutilizar uma classe em sua página repetidamente, enquanto um ID pode ser usado uma vez. Isso é claro, se você seguir os padrões WC3.

Uma página ainda será renderizada se você tiver vários elementos com o mesmo ID, mas você terá problemas se / quando tentar atualizar dinamicamente esses elementos, chamando-os com seu ID, pois eles não são exclusivos.

Também é útil observar que as propriedades de ID substituem as propriedades de classe.

O # é um seletor de identificação. Combina apenas elementos com um ID correspondente. A próxima regra de estilo corresponderá ao elemento que possui um atributo id com um valor "verde":

#green {color: green}

Consulte http://www.w3schools.com/css/css_syntax.asp para obter mais informações

Aqui está minha abordagem para explicar as regras .stylee #stylefaz parte de uma matriz. que, se não estiverem na ordem certa, eles poderão se sobrepor ou causar conflitos.

Aqui está a formação.

Matriz

#style 0,0,1,0 id

.style 0,1,0,0 class

se você deseja substituir esses dois, você pode usar o <style></style>bruxo tem um nível de matriz ou a 1,0,0,0. consulta @media irá substituir tudo acima ... Não tenho certeza disso, mas acho que o seletor de ID #pode ser usado apenas uma vez em uma página.