Dans quel ordre faire les feuilles de style CSS remplacer?

Question

Dans quel ordre faire les feuilles de style CSS remplacer?

Demandé el 27 de Février, 2012: Quand la question a-t-elle été
28912 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Dans un en-tête html, j'ai obtenu ceci:

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

Styles.css est ma page-fiche spécifique. Maître.le css est une feuille que j'utilise sur chacun de mes projets pour remplacer le navigateur par défaut. Laquelle de ces feuilles de style qui est prioritaire? Exemple: la première feuille contient des

body {margin:10px:}

et associés frontières, mais le second contient mes resets de

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

En essence, ne le sous-élément de CSS sont les mêmes en termes de références de la feuille de style comme il le fait dans typique CSS fonctions? Ce qui signifie que la dernière ligne est celle qui s'affiche?

Demandé el 27 de Février, 2012 par iananananan

Answer 1

4 Réponses

Answer 2

174voto

duskwuff Points 69245

Les règles de la règle CSS cascading sont complexes, plutôt que d'essayer de paraphraser mal, je vais simplement vous référer à la spécification:

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

En bref: plus de règles spécifiques remplacer plus générales. La spécificité est définie en fonction du nombre de Id, les classes et les noms des éléments sont impliqués, ainsi que l' !important déclaration a été utilisé. Lorsque plusieurs règles de la même "spécificité niveau" existent, celui qui apparaît en dernier gagne.

Répondu el 27 de Février, 2012 par duskwuff (69245 Points )

Answer 3

37voto

Blender Points 114729

La plupart de style spécifique est appliqué:

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

div {
  color: red;
}

Si tous les boutons ont la même spécificité, la plus récente decleration est utilisé:

div {
  color: red;
}

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

Dans votre cas, body:not([input="button"]) est tellement plus précis de ses styles sont utilisés.

Répondu el 27 de Février, 2012 par Blender (114729 Points )

Answer 4

27voto

Roy M J Points 2933

L'ordre a de l'importance. La dernière valeur déclarée d'occurrence multiple seront prises. Consultez la même que j'ai travaillé : http://jsfiddle.net/Wtk67/

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


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

Si vous échange l'ordre de .test{}, vous pouvez voir le code html prend la valeur du dernier déclaré dans le CSS

Répondu el 2 de Juillet, 2013 par Roy M J (2933 Points )

Answer 5

6voto

prodigitalson Points 38549

Il dépend à la fois de l'ordre de chargement et la spécificité de la réglementation appliquée à chaque style. Compte tenu du contexte de votre question, vous voulez charger votre reset général d'abord, puis la page spécifique. Alors si vous êtes toujours pas à voir l'effet voulu, vous avez besoin de regarder dans la spécificité des sélecteurs impliqués comme d'autres l'ont déjà souligné.

Répondu el 27 de Février, 2012 par prodigitalson (38549 Points )

Dans quel ordre faire les feuilles de style CSS remplacer?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Dans quel ordre faire les feuilles de style CSS remplacer?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: