Le bootstrap peut-il changer le style ?

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. (tel que : classe)

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

4. Sélecteur global (tel que : * numéro)

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

6. Sélecteur descendant (tel que : #head .nav ul li Sélecteur de l'ensemble parent à l'ensemble descendant)

7. Sélecteur de groupe div, span, img {color:Red} signifie que les balises avec le même style sont affichées dans des groupes

Héritez le sélecteur (tel que : div p, notez que les deux sélecteurs utilisent la barre d'espace Séparé)

9. Sélecteur de pseudo-classe (par exemple : style de lien, pseudo-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 respectivement au début, à la fin et à l'inclusion)

11. sign>)

12.Sélecteur de frères et sœurs adjacents CSS (tel que : h1+p, avec signe plus +)

Recommandations associées : "Tutoriel de mise en route de Bootstrap"

2. Priorité

Lors de l'utilisation de la règle !important sur une déclaration de style, la déclaration de style remplacera toute autre déclaration dans CSS qui 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 remplace le sélecteur de classe .classname{margin:3pxl}.

Le sélecteur de classe a un poids de 10 ; défini par un ou plusieurs sélecteurs de classe, sélecteurs d'attributs et sélecteurs 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;} couvre *{margin:10px;}.

Sélecteur de caractères génériques : tel que *{marigin:6px;}.

Le poids de personnalisation ou d'héritage du navigateur est de 0,1.

Tri récapitulatif : !important > Style en ligne > Sélecteur d'ID > Sélecteur de classe > Trois ! 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.

Leçon de requête :

Ne jamais utiliser !important sur le CSS à l'échelle du site.

Utilisez uniquement !important dans des pages spécifiques où vous devez remplacer les CSS à l'échelle du site ou externes (tels que les ExtJ ou YUI référencés).

N’utilisez jamais !important dans vos plugins.

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!