Όρισμα !important CSS

Τι είναι η !important?

CSS !important κανόνες για να δώσετε μεγαλύτερη προτεραιότητα σε ένα attribute/value σε σύγκριση με τα κανονικά στυλ.

Πράγματι, αν χρησιμοποιήσετε !important Κανόνες, αυτό καλύπτει όλες τις προηγούμενες ρυθμίσεις στυλ για το συγκεκριμένο στοιχείο!

Ας δούμε ένα παράδειγμα:

Παράδειγμα

#myid {
  background-color: blue;
}
.myclass {
  background-color: gray;
}
p {
  background-color: red !important;
}

Δοκιμάστε το Εκείνες

Παράδειγμα εξήγησης

Στο παραπάνω παράδειγμα, τα τρία κεφάλαια θα αποκτήσουν κόκκινο φόντο χρώμα, παρά το γεγονός ότι ο επιλογέας ID και η επιλογέας κλάσης έχουν υψηλότερη ειδικότητα.!important Οι κανόνες καλύπτουν τις δύο περιπτώσεις της ιδιότητας background-color.

Σημαντικά για την !important

Κάλυψη !important Ο μόνος τρόπος για να καλύψετε τους κανόνες είναι να περιλαμβάνετε μια άλλη δήλωση με την ίδια (ή υψηλότερη) ειδικότητα στη πηγή κώδικα !important Κανόνες - Αυτό είναι το ξεκίνημα του προβλήματος! Αυτό κάνει τον κώδικα CSS να γίνει χάος και την αποσφαλμάτωση να γίνει δύσκολη, ειδικά όταν έχετε μεγάλο πίνακα στυλ!

Εδώ δημιουργούμε ένα απλό παράδειγμα. Όταν βλέπετε τον κώδικα CSS, δεν είναι πολύ σαφές ποιο χρώμα θεωρείται πιο σημαντικό:

Παράδειγμα

#myid {
  background-color: blue !important;
}
.myclass {
  background-color: gray !important;
}
p {
  background-color: red !important;
}

Δοκιμάστε το Εκείνες

Συμβουλή:Ενημέρωση !important Οι κανόνες είναι καλοί. Μπορείτε να δείτε αυτό στη πηγή CSS. Αλλά, εκτός αν είστε απολύτως αναγκασμένοι να το χρησιμοποιήσετε, μην το χρησιμοποιείτε.

Μπορεί να υπάρχουν ένα ή δύο λόγικα χρήσεις της !important

Μια άλλη χρήση !important Η κατάσταση είναι, αν πρέπει να καλύψετε στυλ που δεν μπορούν να καλύπτονται με άλλο τρόπο. Αυτό μπορεί να συμβεί επειδή χρησιμοποιείτε ένα σύστημα διαχείρισης περιεχομένου (CMS) και δεν μπορείτε να επεξεργαστείτε κώδικα CSS. Σε αυτή την περίπτωση, μπορείτε να ρυθμίσετε μερικά προσαρμοσμένα στυλ για να καλύψετε ορισμένα στυλ CMS.

Μια άλλη χρήση !important Η κατάσταση είναι: υποθέτουμε ότι θέλουμε όλα τα κουμπιά στη σελίδα να έχουν ειδικό χρώμα. Εδώ, το στυλ του κουμπιού είναι γκρι φόντο χρώμα, λευκό κείμενο και μερική εσωτερική διαδρομή και πλαίσιο:

Παράδειγμα

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

Δοκιμάστε το Εκείνες

Εάν τοποθετήσουμε το κουμπί σε ένα άλλο στοιχείο με υψηλότερη ειδικότητα, η εμφάνιση του κουμπιού μπορεί να αλλάξει και τα χαρακτηριστικά να αντιτίθενται. Εδώ είναι ένα παράδειγμα:

Παράδειγμα

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}
#myDiv a {
  color: red;
  background-color: yellow;
}

Δοκιμάστε το Εκείνες

Για να "επιβάλλουμε" ότι όλα τα κουμπιά έχουν την ίδια εμφάνιση σε κάθε στιγμή, μπορούμε να χρησιμοποιήσουμε !important Προσθέστε τους κανόνες στις ιδιότητες του κουμπιού, όπως παρακάτω:

Παράδειγμα

.button {
  background-color: #8c8c8c !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}
#myDiv a {
  color: red;
  background-color: yellow;
}

Δοκιμάστε το Εκείνες