Вынес отдельной темой, так как заметил, что большинство людей не понимают правила формирования приоритетов в 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)