γρήγορη ερώτηση για css inheritance

[teoepi2]

γεια, είμαι αρχάριος και απλώς κάνω κάποιες δοκιμές σε πολύ βασικά πράγματα  (5 γραμμές κώδικα)
έχω τα παρακάτω αποσπάσματα κώδικα:

HTML
<div class="zero" id="zero">
  <div class="one">
    <div class="two" style="background-color: #"></div>
  </div>
</div>

CSS
div {color: #}
.one {color: #}
.two {size: #}

όπως βλέπετε το div .two έχει inline style στην html και ταυτόχρονα έχει και style από το .css

διαβάζω πως:
Inheritance also needs to be understood in this context — some CSS property values set on parent elements are inherited by their child elements, and some aren't.
For example, if you set a color and font-family on an element, every element inside it will also be styled with that color and font, unless you've applied different color and font values directly to them.

όπως βλέπετε δεν έχω γράψει color για το element div .two
άρα σύμφωνα με τα παραπάνω περιμένω το div .two να κληρονομήσει το color του element div .one
όμως ο firefox το εμφανίζει με το color του element div και όχι με το color του element div .one όπως περίμενα
πώς ακριβώς λειτουργεί;

ευχαριστώ και συγνώμη προκαταβολικά αν καθυστερήσω να απαντήσω, λογικά θα ξαναμπω το βράδυ
 

[ralloss]

CSS
div {color: #}

Εδώ δίνεις αυτό το color σε ΟΛΑ τα div . Δηλαδή παρόλο που δεν έχεις δώσει συγκεκριμένο color για το class two , θα πάρει αυτό το color διότι είναι div. Έχεις κάνει ήδη override το inheritance δηλαδή.

Για να έχεις το αποτέλεσμα που θες κάνε το κάπως έτσι

CSS
.zero {color: #}
.one {color: #}
.two {size: #}

 

[XPHSTOS_]

Ότι είπε ο @ralloss 
 

Quote

For example, if you set a color and font-family on an element, every element inside it will also be styled with that color and font, unless you've applied different color and font values directly to them.

Το element που βρίσκεται η κλάση .two είναι ένα div, έσύ στα div ορίζεις χρώμα τάδε... άρα από εκεί παίρνει το χρώμα

[teoepi2]

κάτσε για να καταλάβω (και sry για το πρήξιμο για βασικά πράγματα αλλά δεν είμαι του επαγγέλματος)
η απορία μου δεν είναι γιατί το div .two κληρονομεί το color του div
η απορία μου είναι γιατί το div .two δεν κληρονομεί το color του div .one κατά προτεραιότητα

να σας εξηγήσω την σκέψη μου δηλαδή, καθώς διαβάζω τον κανόνα:
For example, if you set a color and font-family on an element, every element inside it will also be styled with that color and font, unless you've applied different color and font values directly to them.

και περιμένω:
- το color του div να κληρονομείται σε όλα τα div εκτός κι αν έχουν το δικό τους color
μέχρι εδώ όλα καλά, το καταλαβαίνω αυτό όπως ακριβώς το λέτε κι εσείς

- το div .one λοιπόν δεν κληρονομεί το color του div αφού έχει δικό του color όπως γράφει ο κανόνας και είναι πιο συγκεκριμένο από το πιο γενικό style του div και κάνει override

- τώρα σύμφωνα με τον κανόνα είπαμε περιμένω όλα τα όλα τα div και όλα τα element inside div να κληρονομήσουν το color του div
άρα σωστά δεν υποθέτω πως ανάλογα θα πρεπε να περιμένω και πως όλα τα element inside div .one να κληρονομήσουν το color του div .one; εκεί είναι η απορία μου
το style του div κληρονομείται
το style του div .one δεν κληρονομείται; γιατί δεν το αναφέρει ο κανόνας;

- άρα εγώ περίμενα το div .two που δεν έχει color, να κληρονομήσει το style του άμεσου parent και πιο συγκεκριμένου style που είναι το div .one και όχι το div που είναι το πιο general και πιο μακρινό

Επεξ/σία 13 Μαΐου 2021 από teoepi2

[XPHSTOS_]

By default οι browsers δίνουν κάποια styles.
Αυτά κάνει override το inheritance.

Αλλά από την στιγμή που εσύ ορίσεις χρώμα για όλα τα div, τότε το inheritance παύει να υπάρχει, έτσι ακόμη και αν ορίσεις χρώμα στο parent element δεν θα κληρονομηθεί στο child div γιατί έχει ήδη δικό του χρώμα (applied directly on them).

Δηλαδή το .two έχει χρώμα, απλά δεν το παίρνει από την κλάση.
Το παίρνει από το div.

Αν θέλεις να σε αυτό το σημείο εσύ να κληρονομείς το χρώμα από το parent θα πρέπει να πεις στο .two { color: inherit } και έτσι θα πάρει το χρώμα από το parent.

Επεξ/σία 13 Μαΐου 2021 από XPHSTOS_

[teoepi2]

1 ώρα πριν, XPHSTOS_ είπε

By default οι browsers δίνουν κάποια styles.
Αυτά κάνει override το inheritance.

Αλλά από την στιγμή που εσύ ορίσεις χρώμα για όλα τα div, τότε το inheritance παύει να υπάρχει, έτσι ακόμη και αν ορίσεις χρώμα στο parent element δεν θα κληρονομηθεί στο child div γιατί έχει ήδη δικό του χρώμα (applied directly on them).

Δηλαδή το .two έχει χρώμα, απλά δεν το παίρνει από την κλάση.
Το παίρνει από το div.

Αν θέλεις να σε αυτό το σημείο εσύ να κληρονομείς το χρώμα από το parent θα πρέπει να πεις στο .two { color: inherit } και έτσι θα πάρει το χρώμα από το parent.

α ok τώρα το κατάλαβα πολύ καλύτερα,
δεν είναι ότι το div .two κληρονομεί color από το div αντί να κληρονομήσει από το div .one αλλά ότι από τη στιγμή που το div .two είναι εξορισμού και το ίδιο ένα div, αυτό σημαίνει πως έχει ήδη πάρει color και δεν εφαρμόζεται κληρονομικότητα καν
ναι εκεί είχα κολλήσει, πριν δεν καταλάβαινα τι είχατε γράψει πιο πάνω, τώρα το πιασα

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

έχω πολλά child div (χιλιάδες) και στο κάθε ένα έχω βάλει class="#" στην HTML (το ίδιο class σε όλα δηλαδή) για να τους δώσω style από τη css
και θέλω να φτιάξω ένα parent div που θα κληρονομήσει στα child div το style του για να μπορέσω να αφαιρέσω τα χιλιάδες class="#" και να αφήσω μόνο ένα (στο parent)

Επεξ/σία 13 Μαΐου 2021 από teoepi2