Конфлікти стилів в css

Визначаючи і перевизначаючи для елементів сторінки значення різних властивостей, ми повинні розуміти, який саме значення застосує браузер і чим він при цьому буде керуватися.

В CSS діє таке правило: чим конкретніше селектор визначає елемент, тим більша ймовірність, що таким чином, застосовується саме він.

Чим специфичнее селектор, до якого прив'язаний стиль, тим він сильніший.

Про специфічності

Порівняємо, наприклад, селектор по тегу і селектор за ідентифікатором.

Перша вибірка дуже загальна - в неї потрапляють всі елементи даного типу на сторінці, в другу вибірку потрапить всього один конкретний елемент, про який ми, мабуть, добре знаємо. Раз вже ми попрацювали настільки конкретизувати елемент, який хочемо оформити, значить, він дійсно повинен бути так оформлений.

І таким чином ми легко можемо перевизначити стиль для конкретної посилання, при цьому не зачіпаючи всі інші. Це відбувається тому, що селектор за ідентифікатором специфичнее селектора по тегу. а значить, сильніше його і може перекрити його дію своїм.

Давайте розставимо селектори в порядку збільшення їх специфічності:

- тег - найменш специфічний селектор. Ми не повинні нічого робити, щоб вибрати елемент по тегу, ні додавати його в клас, ні призначати ідентифікатор. Таких елементів на сторінці може бути безліч. Загалом це малоспецифичними селектор.

- клас. Щоб створити клас і додати в нього елементи, ми повинні трошки попрацювати. елемент, для якого визначено клас вже набагато конкретніше, ніж елемент без класу, але все ж таких елементів теж може бути багато.

- ідентифікатор - високий ступінь специфічності. Ідентифікатор за правилами вказує лише на один конкретний елемент, отже, селектор за ідентифікатором максимально специфічний. Однак, і у нього знайшовся конкурент.

- Інлайновий стиль специфічний настільки, що навіть не потребує селекторі. Він одним з яскравих та прямим чином вказує на елемент, до якого повинен бути застосований. Ми попрацювали винести цей стиль із загальної таблиці і безпосередньо прив'язати його до елементу, значить, для того були причини, значить, цей елемент повинен виглядати саме так і ніяк інакше.

Сподіваюся, загальна ідея зрозуміла. Згодом ви почнете підсвідомо розуміти, який селектор сильніше і як можна підсилити правило при необхідності.

вага селектор

Для зручності обчислень кожному селектору присвоєно числове значення, або вага.

Зверніть увагу:
- Універсальний селектор важить 0.
- Комбінатори в контекстних селекторах (+,

^, Пробіл) - не мають ваги. Також не мають ваги правила, успадковані від батьків.

Нульовий вага і повна відсутність ваги - це різні поняття.

Є елемент p і вкладений в нього span. Для абзацу встановлений синій колір тексту, і ми могли б розраховувати, що це правило пошириться і на вкладений span. Однак у нас є правило, прив'язана до універсального селектору, що визначає помаранчевий колір тексту для всіх елементів. Для елемента p воно буде перевизначити (так як селектор по тегу сильніше універсального), а ось для елемента span - немає (так як універсальний селектор з нульовим вагою сильніше успадкованих стилів, які взагалі не мають ваги).

Lorem ipsum dolor.

Визначення ваги селектор

Вага складних селекторів визначається як сума ваг входять до них простих:

- Наприклад, контекстний селектор предка div span має вагу 2, так як в нього входять два селектора по тегу, а комбінатор пробіл не має ваги.

-Складовою селектор div.border важить 11.

Скільки важить ось такий складний селектор?

ul # mainMenu> li.listItem: first-child> a [href * = "wikipedia"]

Інлайновие стилі

Переконаємося в тому, що інлайновий стиль найважчий і значимий.