Comment rendre le fichier CSS plus important qu'un autre fichier CSS?

Je veux toutes les Catégories,des Tags et des Id dans css.css écrasé sur bootstrap.min.css sans répéter les Catégories,les tags et les Id de bootstrap.min.css.

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/css.css" rel="stylesheet">

source d'informationauteur alnassre

  1. 11

    N'est pas de la magie. CSS a ses propres principes, tels que la cascade, et vous ne pouvez pas les désactiver.

    Vous pouvez placer la référence à css.css après la référence à bootstrap.min.cssmais ce n'est qu'un facteur dans le processus de résolution CSS règles seront appliquées. L'ajout de !importantqui est généralement un symptôme de mauvaise conception, est une juste encore un autre facteur: !important règle dans un fichier antérieur peut remplacer votre !important règle, si son sélecteur a une plus grande spécificité.

    Pour remplacer les règles CSS, vous devez analyser la règle que vous souhaitez remplacer et définir une règle qui “gagne”, par la cascade de principes.

  2. 6

    Simple, inclure le plus important fichier CSS dernier.

  3. 2

    Lorsque vous inclure une feuille de style, il remplace toutes les déclarations de la avant compris les feuilles de style. Si vous changez comprend:

    <link href="css/css.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">

    Bootstrap est inclus et l'écrase propertys de css.css.

    Espère que ça aide.

  4. 2

    Je ne peux que vous donner un exemple.

    Permet de dire que Bootstrap.css est la suivante
    .rules #world {border:0px;} [spécificité 110]

    et css.css est la suivante
    div #world{border:20px;} [spécificité 101]

    Dans ce cas, bootstrap.css sera toujours la priorité sur les css.css. Donc, je vous conseille d'ajouter un conteneur pour l'ensemble de votre contenu - donner ce contenant un id..disons "dieu", puis ajouter le préfixe .dieu à tous vos styles css - mais encore une fois, ce n'est pas aussi simple, et dépend beaucoup de la façon dont vous obtenez vos calculs droit.

    #god div #world{border:20px;}

    C'est une longueur de topic que quelqu'un d'autre l'a fait remarquer - de sorte que vous aurez pour l'essentiel à savoir ce que tout le bootstrap est de faire de votre page et ce qu'est le css.css en train de faire.

    Vous pouvez toujours regarder vers le haut ce merveilleux article qui ne vieillit jamais http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

  5. 1

    Je pense que vous pourriez faire une chose, c'est que d'inclure uniquement le css.css et @import "css/bootstrap.min.css" dans le css.css de sorte que votre code sera comme ceci

    Dans le code html

    <link href="css/css.css" rel="stylesheet">

    et Dans les css.css

    @import "css/bootstrap.min.css"

.bootstrap_class{//your style..}
.hero-unit{background: red;}

    En utilisant cette astuce, vous pouvez remplacer bootstrap style sans afficher les résultats pour les maux de tête cette

  6. 0

    si vous ne pouvez pas modifier les fichiers, et l'ordre de l'appel du fichier css ne fonctionne pas, vous pouvez toujours utiliser !important,
    mais qui va mangent beaucoup de temps becuz vous devez l'ajouter à chaque ligne de css.

    ex: display: inline !important;

  7. 0

    Renvoyer le dernier élément dans une liste qui vous permettra de toujours remplacer les précédentes feuilles de style

    Ci-dessous la force de votre page pour l'adapter à 980px puisqu'elle remplace la précédente feuille de style de la propriété

    Exemple

    Style1.css

     #main{ width:1000px;}

    Style2.css

     #main{ width:980px;} 
      or  
 #main{ width:980px !important;} /* if needed only */

    HTML

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

<div id="main"></div>
  8. -1

    Si vous travaillez avec bootstrap, cet article pourrait être utile:

    https://stackoverflow.com/a/12819825/1064416