CSS conflicting rules rules

Често се случва да имаме две или повече CSS правила за един HTML обект. Как тогава браузърът решава кое да приложи?

The cascade

Според това правило, всяко CSS правило върху даден HTML обект, презаписва предишното. Тоест тук обектът H1 ще е със син текст.

h1 {
    color: red;
}
h1 {
    color: blue;
}

Аt a very simple level this means that the order of CSS rules matter, when two rules apply that have equal specificity the one that comes last in the CSS is the one that will be used.

Specificity

В случай, че за даден HTML обект имаме повече от едно свойство но зададено с различен селектор.

В този случай ако имаме селектор по клас, той ще презапише селекторът по елемент. Aко имаме селектор по ID, той пък ще презапише този по клас. Тоест, тук цветът на H1 ще е зелен. Явно редът на презаписване е: ID презаписва клас, който презаписва елемент.

#h1_title {
    color: green;
}
.h1_title {
    color: red;
}
h1 {
    color: blue;
}

Inheritance

Всички зададени за родителя свойства се наследяват автоматично от децата. Може да бъдат и презапсани. Например тук ще имаме всички тесктове в синьо, но само P обектите – в черно.

body {
    color: blue;
}
p {
  color: black;
}

Some properties do not inherit — for example if you set a width of 50% on an element, all of its descendants do not get a width of 50% of their parent’s width. If this was the case, CSS would be very frustrating to use!