Quais são as prioridades entre os seletores CSS

Question

CSS Pergunta: Se dois seletores diferentes aplicam-se a um elemento, que ganha

Eu sei que isto não deveria acontecer, mas eu quero ajustar um aplicativo herdado, eo CSS está ficando no meio.

Answer 1

O detalhes sangrentos na especificação são realmente razoavelmente legível. Em resumo:

1. regras !important e regras style em linha ganhar mais.

2. Caso contrário, normalmente as vitórias mais específicas. #id é um seletor mais específico do que .classname é um seletor mais específico do que tagname.

3. Onde regras são igualmente específicas, a declarada últimas vitórias.

Não há nenhuma razão específica para que este ‘não deveria acontecer’. É normal para especificar uma regra pincel largo e depois adicionar uma regra mais específica para atingir um caso; várias regras mesmo de propriedade sobre um único elemento não são incomuns ou indesejáveis.

Answer 2

Você tem que encontrar #no de id = A, # nenhum dos class = B e #no de tag = c no selector

ABC com vitórias de maior valor.

.wrapper .title  p {  
  //some other rules
}

A=0 B=2 C=1 =021

\#foo {
  // some more rules
}

A=1 = 100

.bar .head div li{
  // some more rules
}


A=0 B=2 C=2 =022

100> 022> 021

para vitórias #foo

Answer 3

Deve acontecer! É por isso que ele é chamado de folhas de estilo em cascata. Você pode encontrar um exemplo das prioridades aqui

Answer 4

Consulte a seção fim especificidade da especificação (juntamente com o resto desse capítulo! regras importantes ea ordem das regras aparecem na folha de estilo ter um impacto também).

Answer 5

"# id" é mais poderoso do que o nome ".class" e ".class" é mais poderoso do que o nome de 'tag'. Mas se aplicarmos "! Importante" do que a sua prioridade é a maioria deles.

• ! Important
• estilo em linha
• id
• class
• tag

Answer 6

A prioridade entre seletores é controlada pelo how específico que eles são. seletores mais específicos conquistar menos específico.

Se dois seletores são igualmente específicas, quanto mais tarde uma vitórias sobre o primeiro.

Existem três níveis de especificidade, id, classe e elemento. Então #elem vitórias sobre .elem como um id é mais específico. vitórias .elem .cont mais .elem, pois tem mais seletores no mesmo nível.

Leia mais em "O que acontece quando ocorrem conflitos?" em Selectutorial .

Answer 7

ordem no arquivo CSS só importa se os seletores de compartilhar a mesma especificidade.

Para saber mais sobre a especificidade do seletor: Andy Clarke escreveu Especificidade Guerras qual é a melhor visão geral de como eles funcionam.

Answer 8

CSS significa Cascading Style Sheets. Isto significa que regras se aplicam a elementos de uma forma em cascata. É perfeitamente normal que diferentes seletores se aplicam a um elemento. Pensa, por exemplo, para o seguinte:

<div class="wrapper">
  <div id="foo" class="bar" style="some rules">Test</div>
</div>

As seguintes regras afetaria ao elemento "foo":

.wrapper {
  //some other rules
}

#foo {
  // some more rules
}

.bar {
  // some more rules
}

Regras para prioridades pode ser encontrada aqui .

Eu sempre aconselho a usar o Firefox "incendiário" plugin. Ela vai mostrar exatamente quais as propriedades são avaliadas por um elemento específico e por isso, enfatizando substituições durante a cascata.

Answer 9

1. ! Important
2. estilo em linha
3. #id
4. class
5. tag