– выигрывает наиболее конкретная комбинация селекторов.
И есть довольно простой метод, который позволяет выяснить, какая комбинация селекторов является более специфичной, чем другие.
Вы можете думать о специфичности как о подсчете очков. Комбинация с наибольшим количеством очков побеждает.
И эту оценку можно рассчитать, если расположить типы факторов, влияющих на оценку, слева направо, причем слева будет наивысшее значение специфичности. Затем просто возьмите правило CSS и заполните эту табличку.
Самое высшее значение специфичности имеет атрибут стиля элемента style. И это происходит, когда вы указываете объявления CSS прямо в элементе, используя атрибут стиля. Нет ничего более конкретного, чем это объявление.
Далее идет идентификатор элемента, затем класс или псевдокласс, а затем количество элементов, которые используются в комбинации.
Здесь у первого правила количество баллов 2, а у второго 12 баллов. Поэтому второе правило выигрывает.
И есть еще одна концепция, которую мы рассмотрим. И это концепция переопределения всех правил с помощью «!important».
В этом примере все три абзаца получат красный цвет фона, хотя селектор идентификатора и селектор класса имеют более высокую специфичность. Потому что правило «!important» переопределяет свойство background-color в обоих случаях.
Правило «!important» говорит что не имеет значение, какая есть специфичность и переопределяет все CSS объявления.
Теперь я хочу предупредить вас об использовании этого «!important». Хотя очень заманчиво пропустить понимание всех этих каскадных правил и правил специфичности и просто хлопать «!important» везде, когда что-то не получается, это очень быстро в реальном проекте превратится в кошмар обслуживания, когда вы будете переопределять одно «!important» объявление другим «!important» объявлением, и возникнет гигантский беспорядок.
Теперь, давайте поговорим о стилизации текста.
Существует множество свойств CSS, влияющих на отображение текста. Мы не будем пытаться охватить каждое из них. Вместо этого мы рассмотрим несколько свойств, которые иллюстрируют концепции, лежащие в их основе.
В этом примере мы создаем класс с именем style, и мы применяем этот класс ко второму абзацу в нашем html-файле.
И наша задача состоит в том, чтобы стилизовать второй абзац.
И первое, что мы обычно хотим сделать, это указать семейство шрифтов. И здесь указана ссылка на часто используемые шрифты.
Таким образом, семейство шрифтов – это имя свойства font-family.
И значение для семейства шрифтов может варьироваться. То, что вы обычно указываете в семействе шрифтов, – это комбинация шрифтов. И причина, по которой вы указываете не один шрифт, а несколько шрифтов, заключается в том, что, когда вы указываете семейство шрифтов, вы полагаетесь на компьютер пользователя.
И возможно, что конкретный шрифт
