Comment remplacer les styles dans bootstrap

Changer le style par défaut de bootstrap

Je n'ai pas utilisé bootstrap depuis longtemps et j'ai oublié de le faire modifier le style selon mes propres besoins.

J'ai ajouté une nouvelle classe dès que j'ai commencé et réécrit le style CSS pour écraser le style original, mais cela n'a pas fonctionné. Parce que la priorité du sélecteur n'est pas prise en compte. Certaines de ces questions seront posées lors d’entretiens, mais je n’ai jamais réussi à relier théorie et pratique.

Ma solution est d'augmenter le poids via des sous-sélecteurs. Étant donné que d'autres utilisent également des identifiants, je n'aime pas ajouter des sélecteurs avec des identifiants.

Rappelez-vous une vague de sélectionneurs et leurs priorités.

1. Sélecteur CSS

1. Sélecteur de balises (tels que : body, div, p, ul, li)

2. . Sélecteur de classe (ex : class)

3. Sélecteur d'ID (ex : id)

4. Sélecteur global (ex : signe *)

5. Sélecteurs combinés (tels que : .head .head_logo, notez que les deux sélecteurs sont séparés par la barre d'espace)

6. ul li Sélecteur de l'ensemble parent à l'ensemble descendant)

7. Sélecteur de groupe div, span, img {color:Red} c'est-à-dire que les balises avec le même style sont affichées en groupes

8. Sélecteur d'héritage (tel que : div p, notez que les deux sélecteurs sont séparés par la barre d'espace)

9. -classe d'un élément, 4 états différents : lien, visité, actif, survol )

10. Sélecteurs d'attributs pour la correspondance de chaînes (^$* trois types, correspondant au début, à la fin et à l'inclusion. )

11. Sous-sélecteur (tel que : div>p, avec le signe supérieur à>)

12. Sélecteur de frère adjacent CSS (tel que : h1+ p , avec le signe plus +)

Recommandations associées : "Tutoriel de démarrage de Bootstrap"

Priorité

Lorsque vous utilisez la règle !important sur une déclaration de style, la déclaration de style remplace toutes les autres déclarations en CSS. IE6 ne prend pas en charge cet attribut

Le poids maximum de la feuille de style en ligne est de 1 000 ; c'est-à-dire l'ajout de style à la balise d'élément en HTML, c'est-à-dire le style en ligne. Cette méthode rendra le CSS difficile à gérer, elle n'est donc pas recommandée.

Le sélecteur d'identifiant a un poids de 100 défini par un ou plusieurs sélecteurs d'identifiant. Par exemple, le sélecteur #id{margin:0;}id remplacera le sélecteur de classe.classname{margin:3pxl}

Class Le poids du sélecteur de classe est de 10, il se compose d'un ou plusieurs sélecteurs de classe ; , Définitions du sélecteur d'attribut et du sélecteur de pseudo-classe. Par exemple, .classname{margin:3px} couvrira div{margin:6px;}

le poids du sélecteur de balise est de 1 : défini par un ou plusieurs sélecteurs de type. Par exemple, div{marigin:6px;} remplace le sélecteur de caractère générique *{margin:10px;}

 : tel que *{marigin:6px;}

la valeur de poids personnalisée ou héritée du navigateur est de 0,1.

Tri récapitulatif : !important > Style en ligne > Sélecteur de classe > Caractère générique > important

L'utilisation de !important est une mauvaise habitude et doit être évitée autant que possible, car elle enfreint les règles de cascade inhérentes à la feuille de style et rend le débogage et la recherche de bogues plus difficiles. Lorsque deux déclarations contradictoires avec la règle !important sont appliquées au même élément, la déclaration ayant la plus grande priorité sera utilisée.

Expérience de requête :

Ne l'utilisez jamais sur des CSS à l'échelle du site !important

Uniquement lorsque vous devez couvrir l'ensemble du site ou des CSS externes (tels que des ExtJ ou YUI référencés ) dans une page spécifique !important

Ne jamais utiliser !important

dans votre plugin Pour optimiser, pensez à utiliser la priorité des règles de style pour résoudre le problème au lieu de !important

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!