Как браузер выбирает нужное сss-свойство
У тех, кто только начинает знакомиться с CSS часто возникает вопрос «А почему применяется одно свойство, а не другое?». Действительно, часто на один тэг HTML приходится сразу несколько одинаковых свойств с различными значениями. Вот и встает вопрос, какое свойство применит браузер.
В этом и заключается суть каскадности CSS (каскадная таблица стилей).
Свойства CSS для элементов могу определяться и в последствии переопределяться новыми значениями. Впрочем, переопределением считается и первое задание свойства, т.к. браузер по умолчанию сам приписывает базовые значения свойств для тэгов.
Что же происходит, когда мы задаем свои значения CSS свойств?
Браузер выбирает из массы определенных значений свойства то значение, которое имеет больший приоритет.
Чтобы наглядно представлять суть определения приоритета (или другими словами – специфичность), используем следующую конструкцию: 0.0.0.0.
А теперь вспомним способы задания свойств (адрессация CSS): тэг, класс, ID, style. Так и заполняем нашу конструкцию, но только в обратном порядке: style.ID.класс.тэг.
Конструкция, которая указывает, к какому элементу применяется свойство, называется селектором. Приоритет вычиcляется для всего селектора.
Пример 1: div { … }
Селектор состоит из 1 тэга, значит специфичность его: 0.0.0.1
Пример 2: div p { … }
Селектор состоит из 2 тэгов, значит специфичность его: 0.0.0.2
Получается, что если в примерах 1 и 2 встречаются одинаковые CSS свойства, но с различными значениями, то к тэгу <p> применится свойство из конструкции 2, имеющее больший приоритет (специфичность задания адреса элемента).
Пример 3: .block p { … }
Селектор состоит из 1 класса и 1 тэга, значит специфичность его: 0.0.1.1. Это больше, чем 0.0.0.2, т.к. мы имеем единицу в более значимом разряде (примерно как числа 10+1 и 1+1).
Пример 4: div.block p { … }
Селектор состоит из 1 класса и 2 тэгов, значит специфичность его: 0.0.1.2.
Пример 5: #home p { … }
Селектор состоит из 1 ID и 1 тэга, и он имеет еще больший приоритет, чем любой из предыдущих примеров, т.к. его специфичность равна 0.1.0.1 (условно можно считать как 0+100+0+1).
Как вы уже могли догадаться, задание свойства через аттрибут тэга style="" имеет наибольший приоритет и сможет переопределить любое из предыдущих свойств и их комбинаций.
Однако, дабы иметь возможность переопределить значение аттрибута style="" средствами CSS, имеется усилитель свойства !important.
Пример 6: <div style="color:blue;"> может быть переопределен из CSS: div {color:black !important;}
А вот если !important использовать внутри style="", то уже ничто не поможет. Потому, как бы ни было сильно наше эго, не стоит так делать, так как вполне может появиться ситуация, когда свойство необходимо будет переопределить, а изменять HTML нельзя.
Однако не надо путать наследование с каскадностью. Что я имею ввиду? Смотрите:
Пример 7: Пропишем свойства #main {color:red;} и strong {color:black;}.
Текст внутри блока #main станет красного цвета, но если внутри него встретится тэг <strong>, то в нем текст будет черным, т.к. его свойства имеют более локальный характер. В то же время, если тэг <strong> имеет id="main", то текст в нем будет красным, согласно приоритету определяемых свойств, о котором мы говорили выше.