Per calcular l'especificitat d'una regla cal tenir en compte:
- Ús d'estils en línia (= a)
- Nombre d'atributs
id(= b) - Nombre d'altres atributs i de pseudo-classes (= c)
- Nombre d'elements i pseudo-elements (= d)
Concatenant els quatre números resultants (a,b,c,d) s'obté l'especificitat:
* {} /* a=0 b=0 c=0 d=0 Especificitat = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 Especificitat = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 Especificitat = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 Especificitat = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 Especificitat = 0,0,0,3 */
h1 + *[rel=up] {} /* a=0 b=0 c=1 d=1 Especificitat = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 Especificitat = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 Especificitat = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 Especificitat = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 Especificitat = 1,0,0,0 */
Comentaris
Comentat per Gonzalo el 31/08/06
Ups, me recuerda a las matrices que estudié por última vez en la universidad...
:)
Comentat per choan el 01/09/06
Brillante. Da gusto ver lo bien que lo has explicado _todo_ (muchos se quedan a medias) en tan poquitas líneas.
Después de leer esto iba a sugerirte un post sobre el orden correcto de la declaración de las pseudo-clases para dar estilo a los enlaces. Veo con satisfacción que ya metes la «bronca» en Sintàxi de pseudo-classes, pero aún así, no estaría de más que le dieras un repaso (incluyendo el `:focus`). Hay una buena docena de wannabes a los que les conviene aprenderlo bien para aprobar el próximo test.
A mí me da pereza escribirlo ;)
Comentat per are el 01/09/06
XD gràcies, ho tindré en compte.