2024-11-19 13:49:39 +01:00
|
|
|
|
|
|
|
|
|
|
:PROPERTIES:
|
|
|
|
|
|
:ID: b0c42731-8c61-4cf2-8d74-dd803e7a52a9
|
|
|
|
|
|
:END:
|
|
|
|
|
|
|
|
|
|
|
|
#+title: poids-des-slecteurs-css
|
|
|
|
|
|
#+post_ID: 249
|
|
|
|
|
|
#+post_slug: poids-des-slecteurs-css
|
|
|
|
|
|
#+post_url: https://www.ciperbliss.com/2014/poids-des-slecteurs-css
|
|
|
|
|
|
#+post_title: poids des sélecteurs CSS
|
2024-11-19 23:50:42 +01:00
|
|
|
|
#+post_tags:
|
2024-11-19 13:49:39 +01:00
|
|
|
|
#+post_type: post
|
|
|
|
|
|
#+post_mime_types:
|
|
|
|
|
|
#+post_guid: undefined
|
|
|
|
|
|
#+post_status: publish
|
|
|
|
|
|
#+post_date_published: <2014-03-13T13:01:03>
|
|
|
|
|
|
#+post_date_modified: <2014-03-13T13:03:09>
|
|
|
|
|
|
#+post_index_page_roam_id: fa7f2a8c-2b94-4e42-bb4c-25c026ed7ff9
|
|
|
|
|
|
#+retrieved_from_db_at: <2024-11-18 16:25:08>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
* poids des sélecteurs CSS
|
|
|
|
|
|
:PROPERTIES:
|
|
|
|
|
|
:CUSTOM_ID: poids-des-sélecteurs-css
|
|
|
|
|
|
:END:
|
|
|
|
|
|
|
2024-11-19 23:50:42 +01:00
|
|
|
|
[[http://s-que.deviantart.com/art/Journal-CSS-for-Beginners-40450590][http://th08.deviantart.net/fs70/300W/i/2009/356/d/a/Journal_CSS_for_Beginners_by_S_Que.png]]Les
|
2024-11-19 13:49:39 +01:00
|
|
|
|
sélecteurs CSS totalisent un certain score pour définir leur priorité
|
|
|
|
|
|
d'exécution, comprendre cette façon de compter les points vous évitera
|
|
|
|
|
|
bien des soucis dans l'héritage des styles.
|
|
|
|
|
|
|
|
|
|
|
|
|
2024-11-19 23:50:42 +01:00
|
|
|
|
|
2024-11-19 13:49:39 +01:00
|
|
|
|
Dans l'ordre du plus prioritaire au moins important:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- les sélecteurs inline ( par exemple
|
|
|
|
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
- les #id (
|
|
|
|
|
|
|
|
|
|
|
|
<<mon-Id>>
|
|
|
|
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
- les .classes (
|
|
|
|
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
- les (
|
|
|
|
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Votre navigateur, pour déterminer quel sélecteur doit avoir raison fait
|
|
|
|
|
|
un tableau selon cet ordre.
|
|
|
|
|
|
|
|
|
|
|
|
|
2024-11-19 23:50:42 +01:00
|
|
|
|
|
2024-11-19 13:49:39 +01:00
|
|
|
|
inline | id | class | element0 | 0 | 0 | 0
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Quand il rencontre un sélecteur il examine de quoi il s'agit. Par
|
|
|
|
|
|
exemple si j'ai ce CSS:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#+begin_quote
|
|
|
|
|
|
#patate .douce.fraiche { color : red; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#+end_quote
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#+begin_quote
|
|
|
|
|
|
.douce { color : blue;}
|
|
|
|
|
|
|
|
|
|
|
|
#+end_quote
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Le premier sélecteur comporte un ID et une classe. Il a donc ce nombre
|
|
|
|
|
|
de points selon le tableau vu ci dessus: 0 | 1 | 2 | 0. C'est à dire 120
|
|
|
|
|
|
points.Le deuxième sélecteur aura juste 10
|
|
|
|
|
|
points.120 étant supérieur a 10, c'est le premier
|
|
|
|
|
|
sélecteur qui aura la priorité pour repeindre.
|
|
|
|
|
|
|
|
|
|
|
|
|
2024-11-19 23:50:42 +01:00
|
|
|
|
|
2024-11-19 13:49:39 +01:00
|
|
|
|
Pour plusse de trucs et astuces sur le CSS, je vous conseille le site
|
|
|
|
|
|
d'Alsacréations.com et openclassrooms.com.Enjoyez.
|
|
|
|
|
|
|
2024-11-19 23:50:42 +01:00
|
|
|
|
|
2024-11-19 13:49:39 +01:00
|
|
|
|
|
