CSS-селекторы: специфичность

Видео доклада: https://www.youtube.com/watch?v=mxu809lbSYM

Как браузеры разруливают каскад

Ссылки:
* 6.4.3 Calculating a selector’s specificity: http://www.w3.org/TR/CSS2/cascade.html#specificity
* Взвешиваем селекторы CSS: http://habrahabr.ru/post/137588/
* Каскадирование: http://htmlbook.ru/samcss/kaskadirovanie
* CSS Specificity: http://cssspecificity.com/
* Pseudo-classes: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

+ Задача в конце презентации

Transcript

1. Microso'  PowerPoint  2011  
3. CSS-­‐Селекторы   Специфичность  и   Производительность  
4. Специфичность  
5. <div id="id" class="class" title="div">block</div> .class { background-color: green; } .class { background-color: red; }
6. <div id="id" class="class" title="div">block</div> #id { background-color: green; } .class { background-color: red; }
7. <div id="id" class="class" title="div">block</div> div[title] { background-color: green; } .class { background-color: red; }
8. <div id="id" class="class" title="div">block</div> [title]:not(a) { background-color: green; } div.class { background-color: red; }
9. Специфичность  
10. a, b, c, d 0, 0, 0, 0
11. Специфичность   a, b, c, d 0, 0, 0, 0 b —  кол.  идентификаторов   c —  кол.  классов,  атрибутов  и  псевдо-­‐классов   d —  кол.  тегов  и  псевдо-­‐элементов   Универсальные  селекторы  (*, +, >, ~)  не   имеют  значений   a —  инлайновые  стили  
12. :not( x ) x  учитывается  
13. Специфичность   1: a, b, c, d 1, 0, 2, 0 2: a, b, c, d 1, 0, 10, 0
14. Специфичность   1: a, b, c, d 1, 0, 2, 0 2: a, b, c, d 1, 0, 10, 0
15. Специфичность   1: a, b, c, d 1, 0, 2, 0 2: a, b, c, d 1, 0, 10, 0
16. Специфичность   1: a, b, c, d 1, 0, 2, 0 2: a, b, c, d 1, 0, 10, 0
17. <div id="id" class="class" title="div">block</div> .class { background-color: green; } .class { background-color: red; } a, b, c, d
18. <div id="id" class="class" title="div">block</div> .class { background-color: green; } .class { background-color: red; } 0, 0, 1, 0 0, 0, 1, 0 a, b, c, d
19. <div id="id" class="class" title="div">block</div> #id { background-color: green; } .class { background-color: red; } a, b, c, d
20. <div id="id" class="class" title="div">block</div> #id { background-color: green; } .class { background-color: red; } 0, 1, 0, 0 0, 0, 1, 0 a, b, c, d
21. <div id="id" class="class" title="div">block</div> div[title] { background-color: green; } .class { background-color: red; } a, b, c, d
22. <div id="id" class="class" title="div">block</div> div[title] { background-color: green; } .class { background-color: red; } 0, 0, 1, 1 0, 0, 1, 0 a, b, c, d
23. <div id="id" class="class" title="div">block</div> [title]:not(a) { background-color: green; } div.class { background-color: red; } a, b, c, d
24. <div id="id" class="class" title="div">block</div> [title]:not(a) { background-color: green; } div.class { background-color: red; } 0, 0, 1, 1 0, 0, 1, 1 a, b, c, d
25. !IMPORTANT  
26. !, a, b, c, d 0, 0, 0, 0, 0
27. .class { float: left; clear: both; color: red !important; z-index: 1; } 0, 0, 1, 0 !, a, b, c, d
28. .class { float: left; clear: both; color: red !important; z-index: 1; } 0, 0, 0, 1, 0 !, a, b, c, d
29. .class { float: left; clear: both; color: red !important; z-index: 1; } 0, 0, 0, 1, 0 !, a, b, c, d
30. .class { float: left; clear: both; color: red !important; z-index: 1; } 1, 0, 0, 1, 0 !, a, b, c, d
31. .class { float: left; clear: both; color: red !important; z-indez: 1; } 0, 0, 0, 1, 0 !, a, b, c, d
33. Резюме  
34. Ссылки   •  6.4.3  CalculaNng  a  selector’s  specificity   •  Взвешиваем  селекторы  CSS   •  Каскадирование   •  CSS  Specificity   •  Pseudo-­‐classes  
35. <div id="id" style=" color: red !important; ">block</div> <style> #id { color: green !important; } </style>