Вынес отдельной темой, так как заметил, что большинство людей не понимают правила формирования приоритетов в CSS.

Правила приоритетов в CSS:

Без !important:

1. Чем больше прописано уточняющих селекторов, тем выше приоритет у данного элемента. Пример:

#BlogTable .left_cnt .post-body {width:60%;}
#BlogTable .left_cnt .blogs-post .post-body {width: 100%;}

У второго приоритет выше, бо как добавлен уточняющий селектор (выделен красным).

2. У ID (#) приоритет выше, чем у class (.) при равных условиях.

3. У class (соответственно у ID тоже выше приоритет) приоритет выше чем у тега (при равных условиях), к примеру: приоритет будет выше у .left_cnt .post-body, чем у .left_cnt div

4. У ID с class приоритет выше чем у простого ID, к примеру: приоритет будет выше у #header.callout, чем у #header

5. У класса с тегом будет приоритет выше чем у просто класса (при равных условиях), к примеру: приоритет будет выше у .left_cnt div.post-body, чем у .left_cnt .post-body

С !important:

1. У !important приоритет выше, даже, если у аналога прописано больше уточняющих селекторов прописано к примеру:

.post-box {position: inherit! !important;}
#BlogTable .post-box {position:relative;}

В данном случае приоритет выше у селектора с !important, несмотря на то, что у другого есть уточняющий селектор с ID..

2. Если у двоих элементов будет стоять !important, то будут действовать правила как без !important.

P.S. !important стоит использовать только в тех случаях, когда без него невозможно обойтись, в других случаях старайтесь избегать применения !important.. Люди довольно часто любят применять !important - типа, а перебью побыстрому, а потом он выходит боком в другом месте и люди в шоке - почему не меняются правила, забыв, что где то сидит засада, которую сам же когда то поставил. Поэтому старайтесь приоритеты выставлять только за счет селекторов, если это возможно..

------------------------------------------------------------------------------------------------------------------------------------------

При обращении к одному селектору дважды или несколько раз работает последнее обращение, пример:

.post-box {margin: 10px;}

.post-box {margin: 5px;}

.post-box {margin: 20px;}


В данном случае работать будет только: .post-box {margin: 20px;}

Исходя из выше сказанного в Своем стиле меньший приоритет имеет второе окно, то бишь: Цвета style_cs.css, потому как он является подключаемым файлом, подключается в самом верху первого окна и считывается браузером раньше основного кода css. То есть браузер считывает css код в Своем стиле вот таким образом:  Цвета style_cs.css - Структура style.css, и соответственно приоритет больше у первого окна Структура style.css, чем у второго.

P.S. А вообще по моему мнению второе окно Цвета style_cs.css не нужен - он только увеличивает код благодаря дубляжу кода, поэтому можно всё прописывать в первом окне, убрав предварительно из него:

/* A1.1 */
@import url(style_cs.css);

Но это относится только к созданию нового стиля с нуля и только для опытных. Простое объединение двух окон в стандартных стилях может привести к увеличению загрузки форума, а не уменьшению.

--------------------------------------------------------------------------------

P.P.S.И еще запомните самое главное правило при использовании !important в верстке дизайна:

Используйте !important только в исключительных случаях, когда без него точно не обойтись, если цепочка селекторов конечная и больше нигде употребляться не будет, и перебивание большим количеством селекторов нецелесообразно своей монструозностью.. В остальных случаях лучше использовать приоритеты без применения !important.

Отредактировано kolobdur74 (Пн, 20 Авг 2018 22:29:53)