web-dev-qa-db-fra.com

Un fichier CSS peut-il avoir priorité sur un autre fichier CSS?

Je travaille à Londres sur une application et le gars HTML/CSS est à New York. Il m'envoie des mises à jour quotidiennement par courrier électronique, car nous n'avons pas de configuration de contrôle de code source que nous puissions utiliser. Je modifie constamment ses fichiers css. Ainsi, chaque fois que je reçois un nouveau fichier, je dois réappliquer toutes mes modifications. et évidemment, plus je fais de travail, plus cela prend longtemps à chaque fois.

J'ai eu l'idée de créer ma propre feuille de style, mais existe-t-il un moyen d'indiquer au navigateur de donner une priorité plus élevée à ma feuille de style et d'écraser certains de ses styles qui ont le même nom de classe et les mêmes attributs?

Ce site ne sera pas public, nous ne prendrons donc en charge que les navigateurs les plus récents.

cssstylesheet
49
Owen

Cela dépend de la façon dont vous les définissez dans votre en-tête. Donc, quelque chose comme ça va marcher:

<link rel="old stylesheet" href="path/to/style.css" />
<link rel="newer stylesheet" href="path/to/style.css" />
<link rel="newest stylesheet" href="path/to/style.css" />

Le dernier sera ramassé.

Et un lien utile sur les feuilles de style ici: http://www.w3.org/TR/html401/present/styles.html#h-14.3.2

Voir aussi: Préséance en CSS si ce qui précède ne fonctionne pas pour vous.

J'espère que c'est clair.

62
Kees Sonnema

Personnellement, je déconseille strictement d'utiliser! Important. Apprenez ce qui est vraiment important grâce à ici .

Tu devrais savoir:

.some-class .some-div a {
    color:red;
}

Est toujours plus important que (l'ordre d'apparence n'a pas d'importance dans ce cas):

.some-class a {
    color:blue;
}

Si vous avez (deux déclarations avec le même niveau):

.some-class .some-div a {
    color:red;
}

.some-class .some-div a {
    color:blue;
}

Une déclaration ultérieure est utilisée. La même chose s’applique aux fichiers inclus dans l’en-tête que @Kees Sonnema a écrit.

11
webrama.pl

Les règles CSS sont appliquées de manière séquentielle. Donc, tout ce que vous avez à faire est d’inclure votre code CSS en dernier, après tous les autres.

4
David Jashi

Les règles de CSS sont séquentielles, vous devriez faire deux choses sur vos fichiers HTML

  1. Incluez votre CSS comme dernier css
  2. Ajoutez! Important sur tous les attributs css de votre fichier css Eg: position : absolute !important;

cela devrait servir votre but

2
Varun

Quelque part, j’ai lu qu’il ne s’agissait pas de savoir quel fichier CSS était appelé avant ou après, mais qui se chargeait en premier. Par exemple, si votre premier fichier CSS est suffisamment long pour continuer à se charger alors que celui qui se trouve sous (qui devrait avoir la priorité la plus élevée selon la théorie de base) est déjà chargé, ces lignes chargées après auront une priorité plus élevée. C'est délicat mais il faut en être conscient! La technique avec spécificité me semble légitime. Ainsi, plus la priorité est élevée (#someid .someclass div plutôt que .someclass div).

2
FoxyStyle

Cela fonctionne comme ceci:

<link rel="stylesheet" type="text/css" href="first-style.css">
<link rel="stylesheet" type="text/css" href="second-style.css">

second-style.css:

@import 'third-style.css';

Le dernier style importé est celui qui respecte toutes les règles. Par exemple:

premier-style.css:

body{
    size:200%;
    color:red;
}

second-style.css:

@import 'third-style.css';
p{
    color:red;
}

troisième-style.css:

p{
    color:green;
    size:10%
}

Les styles résultants seraient:

body{
    size:200%;
    color:red;
}
p{
    color:green;
    size:10%

Note: Si vous ajoutez! Des règles importantes, c'est différent. Par exemple:

premier-style.css:

body{
    size:200% !important;
    color:red !important;
}

second-style.css:

@import 'third-style.css';
p{
    color:red;
}

troisième-style.css:

p{
    color:green;
    size:10%
}

Le résultat serait:

body{
    size:200% !important;
    color:red !important;
}

J'espère que ça aide!

1
Elliot A.

J'ai trouvé un post ici dans stackoverflow. J'ai pensé que cela pourrait vous aider.

n moyen efficace de fusionner 2 gros fichiers CSS

Si vous cherchez à fusionner vos fichiers, cela sera utile, je suppose.

Spécifier le CSS d'une manière plus spécifique vous aidera également.

comme:

td.classname{}
table.classname{}
1
Elegant Coder

J'utilise la règle de priorité CSS comme ci-dessous:

  1. Première règle en tant que css en ligne avec html, ce qui permettra de conserver n'importe quel css.

  2. Deuxième règle en tant que mot clé use! Important dans la déclaration css après la valeur.

  3. Troisième règle comme ordre de priorité du lien de feuille de style en-tête html (feuille de style css principale après la feuille de style css personnalisée).

Fondamentalement, l'utilisateur veut utiliser la troisième règle veut aussi marge bootstrap css à css personnalisé, exemple ci-dessous:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   

<!-- App Custom CSS -->
<link rel="stylesheet" href="assets/css/custom-style.css">
0
Md Rashadul Islam