Em qual ordem as folhas de estilo CSS substituem?

157

Em um cabeçalho HTML, eu tenho o seguinte:

<head>
<title>Title</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

styles.cssé minha planilha específica da página. master.cssé uma planilha que uso em cada um dos meus projetos para substituir os padrões do navegador. Qual dessas folhas de estilo tem prioridade? Exemplo: primeira folha contém informações específicas

body { margin:10px; }

E fronteiras associadas, mas o segundo contém minhas redefinições de 

html, body:not(input="button") {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

Em essência, o elemento em cascata do CSS funciona da mesma forma em termos de referências à folha de estilo e nas funções CSS típicas? Significando que a última linha é a exibida?

css overriding stylesheet ian5v
fonte
Acabei de perceber que isso seria mais adequado para webmasters. Haveria um lugar melhor para publicar isso?
Ian5v 27/02/12
10
Bem aqui é bom.
Blender
4
body:not(input="button")A propósito, não é um seletor válido. Você provavelmente quis dividir isso body, input:not([type="button"]).
BoltClock
Isso é interessante. Não acredito que tenha visto essa sintaxe antes. Ainda sou novo, mas esses colchetes duplos são estranhos para mim.
precisa saber é
esses colchetes são para seletores de atributos: developer.mozilla.org/pt-BR/docs/Web/CSS/Attribute_selectors @topic: provavelmente você deseja alterar a ordem das folhas de estilo: seu general master.cssdeve carregar primeiro e é muito mais fácil substituir os estilos principais no seu styles.css.
grilly

Respostas:

163

As regras para cascata de regras CSS são complexas - em vez de tentar parafrasear mal, eu simplesmente o encaminhei para a especificação:

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

Em resumo: regras mais específicas substituem as mais gerais. A especificidade é definida com base em quantos IDs, classes e nomes de elementos estão envolvidos, bem como se a !importantdeclaração foi usada. Quando existirem várias regras do mesmo "nível de especificidade", a que aparecer por último vence.

duskwuff -inactive-
fonte
1
Então não há uma regra específica sobre em que ordem as folhas de estilo são carregadas? Entendo como o CSS é exibido em termos de especificidade, mas assumirei que minha planilha mestre será carregada, a menos que substituída.
Ian5v 27/02/12
11
Na verdade, !importantparticipa diretamente da cascata e não tem nada a ver com especificidade. A especificidade está relacionada aos seletores, enquanto que !importanté usada com declarações de propriedade. (Então você está certo em dizer que as regras são complexas;!)
BoltClock
2
Então, as folhas de estilo são carregadas da mesma maneira que os elementos, sendo que os últimos têm precedência se tiverem a mesma especificidade?
ian5v
3
@iananananan: Basicamente, o navegador nunca vê CSS em termos de folhas de estilo individuais. Se houver várias folhas de estilo, todas elas serão tratadas como se fossem uma única folha de estilo gigante e as regras serão avaliadas de acordo.
BoltClock
2
@ user34660 O comentário de BoltClock é da perspectiva do estilo CSS. Você está certo de que as folhas de estilo são mantidas separadas no DOM, mas essa separação não afeta a maneira como esses estilos são aplicados a qualquer coisa.
duskwuff -inactive-
31

O estilo mais específico é aplicado:

div#foo {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

div {
  color: red;
}

Se todos os seletores tiverem a mesma especificidade, a decleração mais recente será usada:

div {
  color: red;
}

div {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

No seu caso, body:not([input="button"])é mais específico, portanto, seus estilos são usados.

Liquidificador
fonte
1
Veja meu comentário sobre a pergunta referente ao último seletor.
BoltClock
1
A regra de especificidade dificulta as coisas quando precisamos substituir uma folha de estilo não editável!
Ari2
23

Ordem importa. O último valor declarado de ocorrência múltipla será obtido. Por favor, veja o mesmo que eu elaborei : http://jsfiddle.net/Wtk67/

<div class="test">Hello World!!</div>


<style>
    .test{
        color:blue;
    }

    .test{
        color:red;
    }
</style>

Se você trocar a ordem de .test{}, poderá ver que o HTML assume o valor do último declarado em CSS

Roy MJ
fonte
3
Portanto, você deve adicionar o CSS mais específico por último.
live-love
17

O último CSS carregado é O MESTRE, que substituirá todos os css com as mesmas configurações de css

Exemplo:

<head>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/master.css">
</head>

reset.css

h1 {
    font-size: 20px;
}

master.css

h1 {
    font-size: 30px;
}

A saída para a tag h1 será do tamanho da fonte: 30px;

Doodl
fonte
1
Oi. No meu caso, o primeiro definido .cssé carregado por último. Eles são aplicados na ordem em que são carregados ou na ordem em que são definidos?
Eugen Konkov
Obrigado, esta é exatamente a explicação que eu estava procurando.
HunterTheGatherer
7

Vamos tentar simplificar a regra de cascata com um exemplo. As regras são mais específicas para gerais.

  1. Aplica a regra do ID primeiro (sobre classe e / ou elementos, independentemente do pedido)
  2. Aplica classes sobre elementos, independentemente da ordem
  3. Se nenhuma classe ou ID, aplica os genéricos
  4. Aplica o último estilo na ordem (ordem de declaração baseada na ordem de carregamento do arquivo) para o mesmo grupo / nível.

Aqui está o código css e html;

<style>
    h2{
        color:darkblue;
    }
    #important{
        color:darkgreen;
    }
    .headline {
        color:red;
    }
    article {
        color:black;
        font-style:italic;
    }
    aside h2 {
        font-style:italic;
        color:darkorange;
    }
    article h2 {
        font-style: normal;
        color: purple;
    }
</style>

Aqui está o estilo css

<body>
<section>
    <div>
        <h2>Houston Chronicle News</h2>
        <article>
            <h2 class="headline" id="important">Latest Developments in your city</h2>
            <aside>
                <h2>Houston Local Advertisement Section</h2>
            </aside>
        </article>
    </div>

    <p>Next section</p>
</section>

Aqui está o resultado. Independentemente da ordem dos arquivos de estilo ou da declaração de estilo, id="important"aplica-se no final (observe o class="deadline"último declarado, mas não tem efeito).

O <article>elemento contém <aside>elemento, no entanto, o último estilo declarado entrará em vigor, neste caso article h2 { .. } no terceiro elemento h2.

Aqui está o resultado no IE11: (Direitos insuficientes para publicar uma imagem) DarkBlue: Houston Chronicle News, DarkGreen: Desenvolvimentos mais recentes em sua cidade, Purple: Houston Local Advertisement Section, Preto: Next section

insira a descrição da imagem aqui

Kagan Agun
fonte
6

Depende da ordem de carregamento e da especificidade das regras reais aplicadas a cada estilo. Dado o contexto da sua pergunta, você deseja carregar sua redefinição geral primeiro, depois a página específica. Então, se você ainda não está vendo o efeito pretendido, precisa analisar a especificidade dos seletores envolvidos, como outros já apontaram.

prodigitalson
fonte
2

EDIT: abril de 2020, de acordo com o comentário de @ LeeC, este não é mais o caso

Sim, funciona da mesma forma como se estivessem em uma folha, no entanto:

Questões sobre pedidos de carga!

<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

No código acima, não há garantia de que master.cssserá carregado depois styles.css. Portanto, se master.cssfor carregado rapidamente e styles.cssdemorar um pouco, styles.cssse tornará a segunda folha de estilo e quaisquer regras com a mesma especificidade master.cssserão substituídas.

É melhor colocar todas as suas regras em uma única folha (e minificar) antes da implantação.

usuario
fonte
Considere o caso de folhas de estilo alternativas quase idênticas carregadas na seção <head> de uma página, uma contendo atributos de mídia condicionais para carregar uma folha de estilo específica para smartphones e tablets. Nesse caso, a lógica especificada na mídia deve ser estritamente exclusiva para cada folha de estilo se a ordem de carregamento for indeterminada.
Lindsay Haisley
@n_i_c_k Sua resposta está incorreta. A ordem da declaração é o que importa, não a ordem de carregamento . Acabei de testar isso com o Fiddler, interrompendo o download master.csse deixando o styles.csscarregamento completo. Então, eu deixo master.csscarregar. O estilo "sobreposto" master.cssainda é aplicado - e a renderização foi bloqueada até ser master.csscarregada e analisada. Nota : Tentei rel=preloadem master.css' (no halting) and that apparently alters its _declaration_ order by hoisting it above styles.css`.
LeeC
Obrigado @LeeC, eu sei que, no momento em que escrevi, minha resposta estava correta, mas aceitarei sua palavra de que ela foi corrigida agora e edite minha resposta.
n_i_c_k 15/04
1

A melhor maneira é usar as classes o máximo possível. Evite os seletores de ID (#) de qualquer maneira. Quando você escreve seletores com apenas uma classe, a herança CSS é muito mais fácil de seguir.

Atualização: Leia mais sobre a especificidade do CSS neste artigo: https://css-tricks.com/specifics-on-css-specificity/

Jeroen Ooms
fonte
1
Este é um grande artigo sobre a especificidade CSS: css-tricks.com/specifics-on-css-specificity
Jeroen Ooms
0

Suspeito da sua pergunta que você tem seleções duplicadas, um conjunto mestre, válido para todas as páginas e um conjunto mais específico que você deseja substituir os valores mestre de cada página individual. Se for esse o caso, seu pedido está correto. O mestre é carregado primeiro e as regras no arquivo subseqüente terão precedência (se forem idênticas ou tiverem o mesmo peso). Há uma descrição altamente recomendada de todas as regras neste site http://vanseodesign.com/css/css-specificity-inheritance-cascaade/ Quando iniciei o desenvolvimento do front end, esta página esclareceu muitas perguntas.

user3094826
fonte
0

É a cascata que define a precedência das declarações. Eu posso recomendar a especificação oficial; essa parte é bem legível.

https://www.w3.org/TR/css-cascade-3/#cascading

A seguir, há um efeito na classificação, em ordem decrescente de prioridade.

  1. Uma combinação de origem e importância:

    1. Transition declarações
    2. Declarações do agente do usuário marcadas com !important
    3. Declarações do usuário marcadas com !important
    4. As declarações do autor da página marcadas com !important
      1. Definições no elemento com styleatributo
      2. Definições em todo o documento
    5. Animation declarações
    6. Declarações do autor da página
      1. Definições no elemento com styleatributo
      2. Definições em todo o documento
    7. Declarações do usuário
    8. Declarações do agente do usuário

  2. Se duas declarações têm a mesma origem e importância, a especificidade, ou seja , com que clareza o elemento é definido, entra em ação, calculando uma pontuação.

    • 100 pontos para cada identificador (#x34y )
    • 10 pontos para cada aula ( .level)
    • 1 ponto para cada tipo de elemento ( li)
    • 1 ponto para cada pseudoelemento ( :hover) excluindo:not

    Por exemplo, o seletor main li + .red.red:not(:active) p > *tem uma especificidade de 24.

  3. A ordem de aparência apenas desempenha um papel se duas definições tiverem a mesma origem, importância e especificidade. As definições posteriores precedem as definições anteriores no documento (incluindo importações).

Michael Schmid
fonte
0

Acredito que, ao executar o código, ele é lido de cima para baixo, o que significa que o último link CSS substituiria estilos semelhantes em qualquer folha de estilo acima dele.

Por exemplo, se você criou duas folhas de estilo 

<link rel="stylesheet" href="style1.css"> 
<link rel="stylesheet" href="style2.css">

e em ambos, você define a cor de plano de fundo do corpo para duas cores diferentes - a cor do corpo em style2.css teria prioridade.

Você pode evitar a questão da prioridade de estilo usando !IMPORTANTdentro do estilo de classe que você gostaria de ter prioridade ou, possivelmente, reorganizando seu <link>pedido.

Ennam Hoque
fonte