Каскадность и приоритетность в CSS
В данном посте мы разбирем такую особенность CSS, как каскадность и приоритетность. Из урока по наследованию вы наверняка помните, что для одного и того же элемента веб-страницы может быть применено несколько правил. Значит, браузер должен как-то решить, какое правило будет наиболее приоритетным для конкретной ситуации. А решает он это с помощью специальной системы, которая, как неудивительно называется каскадностью.
Тема эта очень важна и ее правильное понимание является необходимым условием для продуктивной работы с каскадными таблицами стилей. Поэтому постарайтесь максимально сконцентрироваться в ближайшие 20 минут, чтобы с первого раза освоить материал.
Видеоверсия:
[iframe align=»center» mode=»normal» autoplay=»no» maxwidth=»1280″]
Объединение унаследованных стилей
Так уж сложилось, что вложенные элементы обычно наследуют свойства у своих родителей и предков. Рассмотрим следующую ситуацию:
body { font-family: Arial; }
p { font-size: 16px; }
em { color: blue; }
В примере выше мы задали семейство шрифта общему предку (body), размер — абзацам (p), и цвет — тегу em. На самой веб-странице мы увидим содержимое тега em шрифтом в 16px, семейства Arial и синего цвета. В нашем случае шрифт и размер были унаследованы от предка и родителя соответственно.
Значит, вложенные элементы могут наследовать неконфликтующие свойства. Но что произойдет, если мы зададим одно и то же свойство с разными значениями родителю и предку?
Преимущество имеет ближайший родительский элемент
Рассмотрим следующие правила оформления для главного тега страницы и всех абзацев:
body { color: green; }
p { color: red; }
Как вы думаете, каким цветом окрасится содержимое тега em, зеленым или красным? Конечно же красным (red), так как приоритет при наследовании всегда имеет свойство ближайшего родительского элемента. Учитывая вложенность тегов em в абзацы, их отображение красным цветом не вызывает удивления.
Приоритет всегда отдается конкретному стилю
А что будет, если к предыдущим правилам оформления мы зададим еще один? Например, цвет для того же тега em.
body { color: green; }
p { color: red; }
em { color: blue; }
В этом случае, вполне логично, содержимое тега окрашивается в синий цвет (blue), так как для него есть конкретный определяющий стиль. Это значит, что конкретный стиль имеет приоритет над унаследованными.
При выборе браузером стиля для элемента веб-страницы выбор всегда падает в сторону конкретного стиля. Если его нет, то браузер выбирает стиль ближайшего родительского элемента и применяет его на дочерние.
Распределение приоритетности между конкретными стилями CSS
После уяснения вышезатронутых принципов каскадности, непроизвольно возникает вопрос — «Как распределяются приоритеты между конкретными правилами?» Ведь к одному и тому же элементу можно обращаться разными способами.
Например, через селектор тегов, классов и идентификаторов. Рассмотрим следующий пример, в котором у нас есть один абзац на странице, имеющий класс ‘aly’ и идентификатор ‘main’. Для этого абзаца мы придадим разные цвета через соответствующие селекторы.
p { color: green; }
.aly { color: red; }
#main { color: blue; }
Какое же правило возьмет верх? Ведь все они обращены к одному и тому же элементу. Не знаю, удивитесь вы или нет, но наш единственный абзац будет окрашен в синий цвет. А происходит это потому, что каждый вид обращения имеет свой уровень важности. Он хорошо показан на иллюстрации ниже.
приоритетность в CSSКак видно из иллюстрации, правило применяемое через селектор тегов имеет 1 балл значимости, класс — 10, а идентификатор — 100 баллов. Самая высокая значимость присуждается встроенным стилям, имеющим 1000 единиц важности. Встроенный стиль представляет из себя CSS правило, находящееся внутри html разметки:
<p>Текст абзаца...</p>
При наличии подобного встроенного стиля, абзац будет окрашен в зеленый цвет (green). Однако, использование подобной техники оформления является нежелательным по двум причинам:
- html разметка не предназначена для оформления;
- могут возникнуть трудности при изменении оформления элемента, имеющего встроенный стиль, ведь любые обращения к ней через внешнюю таблицу стилей ничего не даст.
Приоритетность не имеет значения в случае наследуемых свойств.
Иногда принцип приоритетности может ввести человека в заблуждение. Например, когда элемент наследует стили у родителя, вызванного через селектор идентификаторов.
#main{ color: black; }
p { color: green; }
Из примера выше мы видим, что абзацы внутри блочного элемента с идентификатором ‘main’ будут окрашены в зеленый цвет (green). Хотя, на первый взгляд может показаться что правило для ‘#main’ более важно, нужно помнить что оно обращено к div`у, а не напрямую к абзацу. И здесь срабатывает правило о более конкретном стиле, согласно которому абзацы будут окрашены в зеленый цвет. Словом, приоритетность не наследуется потомками.
В таблице ниже вы можете увидеть пример того, как могут суммироваться баллы для разных селекторов.
таблица приоритетностей в CSSПоследний стиль сродни окончательному решению
Может случиться так, что правила для одного и того же элемента могут иметь одинаковый балл по приоритетности. Как в этом случае поступит браузер? Какому CSS правилу он отдаст предпочтение? Рассмотрим на примере ниже.
.alive strong{ color: black; }
p .bold { color: green; }
У нас есть два форматирующих правила для одного и того же тега strong с классом bold, находящийся внутри абзаца с классом alive. Оба стиля имеют одинаковую важность — 11 баллов. Какому правилу браузер отдаст пальму первенства?
В равной схватке побеждает второе правило, так как оно указано последним, читай — является самой актуальной. Но что если у нас есть стиль, который мы хотим наверняка определить для тега strong?
У нас может быть таблица стилей внушительных размеров, по причине чего становится довольно сложно использовать селектор с правильной приоритетностью, не говоря уже о возможности наличия где-нибудь встроенных стилей. Для решения данной задачи мы можем воспользоваться значением !important. Ее необходимо прописать к необходимому свойству.
.alive strong{ color: black !important; }
При использовании такой записи все остальные свойства цвета будут игнорироваться браузером. Однако, нужно использовать данный прием с осторожностью, ведь применив его один раз, вы теряете контроль над данным свойством в будущем, пока не избавитесь от этого значения (!important).
Хитрость: гибкое использование правила последней записи
Одной из сложностей создания больших сайтов является необходимость использовать нестандартные стили для определенных страниц. То есть, для одних и тех же элементов разных страниц может понадобится использовать разные стили. Но как этого добиться?
Как вариант можно использовать правило последней (самой актуальной) записи. Например, для такой «нестандартной» страницы можно подключить отдельную таблицу стилей, содержащую особенные правила форматирования. Только нужно не забыть подключить этот файл после основной таблицы стилей, чтобы отменить предыдущие правила. Вот вам и хитрость:-)
Опасность частого использования селекторов по ID
Советую вам с осторожностью использовать селектор идентификаторов. Наличие у неё большого балла приоритетности может стать причиной проблем оформления вашего сайта. Обратите внимание на стили ниже.
#main p{ color: black; }
p.letter { color: green; }
Согласно первому правилу мы задаем черный цвет для всех абзацев внутри блока с идентификатором ‘main’. Затем мы хотим выделить абзац с классом ‘letter’ отдельным цветом. Он находится внутри блока с идентификатором ‘main’.
Но сделать это не получится по той причине, что первый стиль имеет 101 балл значимости, а второй всего лишь 11. Это пример того, какие трудности могут быть при использовании селектора по идентификатору. Можно конечно, использовать другую запись:
#main .letter { color: green; }
Однако, проблему она решает лишь частично, так как действует только на абзацы внутри блока с идентификатором ‘main’. На абзацы с классом ‘letter’, находящиеся в других блоках она не подействует. Посему, будьте внимательны.
Итак, на этом урок по каскадности можно считать завершенным. Если есть вопросы или мысли по данной теме, буду рад видеть их в комментариях. Надеюсь, данный урок по CSS был для вас полезен. Если это так:
- Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
- [popup_trigger tag=»span»]Подписывайтесь[/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.
На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!
Приоритет в css
А это легко поправимо, и сейчас на примерах я поясню, что существуют приоритеты в css, которые нужно обязательно учитывать.
Возьмём банальный пример: у нас в html документе есть блок с классом ( родитель ) и в нём лежит параграф с классом ( его потомок ). Изначально для всех параграфов в css был указан красный цвет, и в коде html это выглядит так:
<style>
p { color: red; }
</style>
<div>
<p>Текстовый параграф</p>
</div>
Допустим, у нас возникла ситуация, и нам нужно параграф с классом van сделать синим цветом. Для этой цели нам необходимо переопределить уже имеющееся значения для всех параграфов и прописать этот код:
<style>
p { color: red; }
.van { color: blue; }
</style>
<div>
<p>Текстовый параграф</p>
</div>
Как вы начинаете понимать, приоритет в css для тега с указанием класса имеет степень выше, нежели с простым тегом.А теперь представим, что у нас 2 таких параграфа с одним и тем же классом van, только один расположен ( как в примере ) в блоке с классом row, а другой в совершенно другом блоке. И наша задача придать зелёный цвет только тому параграфу, у которого родитель блок с классом row.
Для этого воплощения пропишем уже так:
<style>
p { color: red; }
.van { color: blue; }
.row .van { color: green; }
</style>
<div>
<p>Текстовый параграф</p>
</div>
В этом примере приоритетом в css будет запись .row .van {…} не потому что она прописана последней, а потому что в этой записи указан родитель параграфа.Запомните!
Чем больше предков указано в записи css ( дерево родителей ), тем она будет более приоритетней.
!important
При добавлении к записи значение !important её приоритет станет самым высоким независимо от указаниия предков и независимо от её местоположения ( в самом низу эта зпись сделана или в самом верху ).Старайтесь использовать это дополнение к записи css только в исключительных случаях.
Для примера, я дполню запись в css для нашего параграфа значением !important и все параграфы примут красный цвет независимо от тех записей, которые сделаны ниже и якобы должны иметь приоритет выше.
<style>
p { color: red !important; }
.van { color: blue; }
.row .van { color: green; }
</style>
<div>
<p>Текстовый параграф</p>
</div>
Вывод:
- 1. — Перед тем, как переопределить любой объект в css, внимательно посмотрите уже прописанный для этого элемента код;
- 2. — Новая ваша запись должна быть прописана ниже оригинальной записи и должна иметь приоритет по родителю не ниже уже прописанного.
Похожие статьи
Добавить комментарийКаскадность в CSS — Как создать сайт
Каскадность – приоритеты стилей в CSS
Добрый день друзья, в данной статье мы рассмотрим понятия каскадности в CSS, приоритетов стилей в языке.
В учебнике по CSS для начинающих, мы узнали что внедрить CSS-код в HTML-документ, можно тремя способами:
- Через тег
<link>— внешний стиль, действует на весь сайт - Через тег
<style></style>— внутренний стиль, действует на всю страницу - Через атрибут
style=" "— встроенный стиль, действует на один тег
Все эти три способа, образуют единый каскад стилей: внешний, внутренний, встроенный. У каждого способа имеется свой приоритет.
Допустим, с помощью внешнего стиля, вы назначили абзацам сайта p красный фон, его можно перебить внутренним стилем назначив всем абзацам одной страницы, зелёный фон, ну а внутренний стиль, можно перебить встроенным стилем, назначив выбранному абзацу синий фон.
Из этих трёх стилей, наибольший приоритет имеет встроенный стиль style=" "
Итак, на данный момент у нас имеется следующее, во внешнем стиле (CSS-файле), находится правило которое делает фон у всех абзацев сайта красным:
p {
background: red;
}Во внутреннем стиле одной из страниц сайта находится правило, которое перебивает внешний стиль и делает фон у абзацев данной страницы, зелёным:
<style>
p {
background: green;
}
</style>На этой странице, у одного абзаца есть встроенный стиль, который перебивает и внешние и внутренние стили, делая его фон синим:
<p> Абзац...</p>
Надеюсь, до этого момента всё ясно, идём дальше.
Стили браузера, автора и пользователя
Рассмотренные выше стили, называются стилями автора сайта (создателя сайта). Существуют еще два стиля — это стили браузера и стили пользователя.
Стили браузера — это стили по умолчанию, например если вы создали HTML-страницу, но еще не внедрили CSS-код, то браузер за вас назначает абзацам цвет шрифта черным, а размер 16px.
Стили пользователя — это стили которые задает посетитель сайта в настройках своего браузера, например в них можно прописать чтобы на всех сайтах, которые вы посещаете, шрифт у абзацев был равен 22px (это полезно делать, если у вас проблемы со зрением или на вебсайте на котором вы любите сидеть, слишком маленький шрифт).
Кстати в настройках браузера, можно задавать стили любому тегу, а не только абзацам, например можно сделать так, чтобы все ссылки на каждом сайте который вы просматриваете через свой браузер имели подчеркивание и оранжевый фон.
Теперь соберем в кучу все полученные знания на этом уроке и составим список чьи стили наиболее приоритетнее при просмотре сайта, начиная с самого маленького:
- Стили браузера — самый маленький приоритет
- Стили автора:
- Внешний стиль — файл
style.css - Внутренний стиль — тег
<style> - Встроенный стиль — атрибут
style=" "
- Внешний стиль — файл
- Стили пользователя — самый высокий приоритет
В основном, при создании сайтов вебмастера имеют дело с «внешним стилем», файлом style.css
Каскад в CSS — это одновременное применение разных по приоритету стилей, к HTML-элементам.
Дата публикации поста: 18 июля 2019
Дата обновления поста: 31 октября 2014
Навигация по записям
CSS приоритеты и целевые конкретные элементы
Мой вопрос должен быть довольно прямолинейным. По какой-то причине сегодня я не могу с этим смириться.
Я делаю меню с такой структурой
<div>
<ul>
<li><a href="#">Menu Item</a>
<div>
<a href="#">Login</a>
</div>
</li>
</ul>
</div>
Я пытаюсь нацелить ссылку входа в систему, используя следующий селектор css:
.inner a{}
Селектор работает, однако следующий селектор принимает css presidence и переопределяет вышеупомянутый селектор:
li.menu-item a{}
Я совершенно сбит с толку. Почему второй селектор должен отдавать предпочтение стилю перед первым? Как бы вы, ребята, порекомендовали мне нацелиться на вышеупомянутые элементы «a»?
html css css-selectors css-specificityПоделиться Источник Alex Ritter 08 мая 2013 в 16:13
5 Ответов
10
Почему второй селектор должен отдавать предпочтение стилю перед первым?
Потому что второй селектор более специфичен , чем первый. Первый содержит один класс и один селектор типов, а второй- один класс и два селектора типов.
Чтобы вычислить специфичность, подумайте о селекторе как о наборе четырех чисел, все из которых начинаются с (0,0,0,0)
- Встроенные стили имеют самую высокую специфичность и занимают место первого числа (1,0,0,0) .
- ID считается вторым числом (0,1,0,0)
- Классы, псевдоклассы (кроме
:not()) и селекторы атрибутов считаются третьим числом (0,0,1,0) - Селекторы типов и псевдо-элементы-например,
div {}или::after{}считаются четвертыми (0,0,0,1)
Также:
Поделиться Adrift 08 мая 2013 в 16:18
2
CSS селекторов имеют прикрепленную к ним систему «weight»,
- Элемент, псевдо элемент: d = 1 – (0,0,0,1)
- Класс, псевдокласс, атрибут: c = 1 – (0,0,1,0)
- Id: b = 1 – (0,1,0,0)
- Встроенный стиль: a = 1 – (1,0,0,0)
таким образом, ваш первый селектор имеет оценку (0,0,1,1) в то время как ваш второй селектор имеет оценку (0,0,1,2), которая выше и, следовательно, имеет приоритет
Поделиться Trey 08 мая 2013 в 16:19
1
Это происходит потому, что li.menu a содержит три части для идентификации элемента: родительский элемент (li), родительский класс (элемент меню) и элемент (a). У вашего предполагаемого селектора есть только два, поэтому вы можете изменить его на этот:
li.inner a{}
И это должно сработать.
Редактировать:
Я знал, что уже отвечал на этот вопрос раньше: почему мой HTML не использует последний стиль, определенный в CSS?
Поделиться Maloric 08 мая 2013 в 16:16
0
Приоритет CSS выигрывает объект DOM с самой высокой специфичностью.
Так что же зарабатывает специфика?
Element Selector -- 1
Class Selector -- 10
ID Selector -- 100
Inline Selector -- 1000
В вашем примере: .inner а будет be 11 баллов
a(1) + .inner(10) = 11
li.menu-item a — 12 баллов
li(1) + .menu-item(10) + a(1) = 12
Так вот почему вторым будет то, что показано. Чтобы сделать правильный стиль шоу, просто сделайте его более конкретным, например используйте .меню-пункт .inner a
Здесь есть очень хорошая статья об этом. http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Поделиться Joe Korolewicz 08 мая 2013 в 16:25
0
Вы можете применить CSS только к якорям внутри каждого элемента, как это:
li.menu-item > a{}
.inner > a
Делая это таким образом, правила «li.menu-item a» не будут вмешиваться в другой якорь.
Поделиться Lucas Almeida 08 мая 2013 в 16:41
CSS Div&Classes Приоритеты Стиля
Недавно я изучал некоторые HTML & CSS, и у меня был вопрос о том, как работают приоритеты стиля CSS, а также Какой стиль применяется, когда у нас возникают конфликтные ситуации. Итак, давайте…
Scrapy: выскабливание веб-сайта, где целевые элементы заполняются с помощью document.write
Я пытаюсь уничтожить веб-сайт, где целевые элементы заполняются с помощью метода document.write . Как я могу получить полную версию браузера html для веб-сайта в Scrapy ?
Как перечислить целевые конкретные атрибуты в LLVM?
llvm-objdump имеет возможность -mattr . Если я делаю llvm-objdump -help , то единственная полезная информация, которую я получаю, это: -mattr=<a1,+a2,-a3,…> — Target specific attributes Как…
У вас есть приоритеты?
Волокна определяются как легкие потоки, и потоки имеют приоритеты, потому что они заранее запланированы. Однако, поскольку волокна являются кооперативными, у них тоже есть приоритеты?
Приоритеты в очереди приоритетов
Я делал вопрос интервью по приоритетным очередям и имел простой вопрос, с которым я надеялся получить некоторую помощь. Вопрос в том: Приоритеты должны быть неотъемлемыми? Могу ли я реализовать…
прочитайте содержимое внешней веб-страницы и получите конкретные элементы
Возможный Дубликат : Как разобрать и обработать HTML с PHP? Я уже некоторое время пытаюсь это понять. Я пытаюсь не только получить содержимое веб-страницы с помощью file_get_contents($url) , но и…
Как реализовать приоритеты в SQL (Постгреса)
Я пишу некоторое программное обеспечение, которое требует хранения элементов в базе данных, элементы должны иметь ‘priority’, поэтому мы получаем ID | Name | Priority…
целевые дочерние элементы, но не те из них, которые были нажаты
Я видел подобные примеры, но не могу понять, как заставить not(this) работать в моем коде. В основном то, что мне нужно сделать, это: целевые дочерние элементы, но не те, которые были нажаты (…
Работают ли приоритеты между очередями / трубками в Beanstalkd?
Я немного смущен тем, работают ли приоритеты на уровне задания или очереди/трубки. Причина, по которой я спрашиваю, заключается в том, что я использую модуль интеграции beanstalkd в Drupal. Этот…
Кто устанавливает приоритеты, в которых команда разработчиков исправляет ошибки и почему?
мы-команда разработчиков agile, которая в настоящее время работает над несколькими проектами на 2 веб-сайтах. В офисе царила полная неразбериха по поводу того, кто устанавливает приоритеты для…
Как в css переопределить стиль: приоритетность селекторов
От автора: работая с css вам в любом случае придется переопределять стили. Задания свойств для глобальных селекторов в любом случае не хватит. Сегодня посмотрим, как в css переопределить стиль любому элементу.
Первое – глобальные селекторы тегов
Селекторы тегов предназначены для того, чтобы давать стили всем элементам одного типа. Например, спискам. Чтобы убрать маркеры у всех списков на веб-страницах сайта, достаточно в css записать это:
Отлично. Соответственно, свой селектор есть у ячеек таблиц, картинок, блоков, полей форм и вообще всех элементов. Это понятно. Но тут же возникает проблема: едва ли все списки на сайте вы будете стилизовать одинаково. Не, ну тут ситуации могут быть абсолютно разными. Давайте рассмотрим лучше на примере абзацев, потому что это будет более приближено к реальности.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееИтак, всем абзацам на странице задаем какие-то стили. Это будет общее оформление.
p{ font-size: 16px; color: #333; }
p{ font-size: 16px; color: #333; } |
Ну сильно напрягаться не будем, всего лишь зададим цвет и размер шрифта. Хорошо, это просто оформление для всех параграфов. Но теперь допустим, что перед вами появилась задача: определенные абзацы нужно выделить красным цветом. Как это сделать?
Достаточно просто. Опишем в css новый стилевой класс. Допустим, назовем его red, чтобы было понятно.
Теперь остается задать его нужным абзацам. Допустим, мне нужно сделать его для второго и третьего. Я надеюсь, прописывать стилевые классы вы умеете, это делается так:
<p class = «red»>Абзац 3</p>
<p class = «red»>Абзац 3</p> |
Ну и также поступаем с другим абзацем. В итоге мы уже переопределили стиль. То есть цвет текста всех абзацев был темно-серым, а мы изменили цвет некоторых параграфов на красный. Вот вам и переопределение стилей.
Но задание стилевого класса годится в том случае, когда нужно переопределить правила группе элементов. То есть нескольким параграфам, изображениям и т.д. Но что делать, если переопределить стили нужно всего лишь одному элементу? Для этой цели уже лучше использовать идентификатор.
Идентификатор (id) используется для того, чтобы присвоить уникальную метку конкретному элементу на веб-странице. Таким образом к нему можно будет обращаться в css через этот идентификатор и задавать какие-то правила. Они будут применены, даже если ранее для этого элемента были заданы абсолютно другие стили.
Например, у нас есть 2 абзаца, в котором текст окрашен красным цветом. Но если одному из них задать идентификатор и потом описать в css стили для этого селектора, то они будут приоритетнее, чем правила класса.
<p class = «red» id = «blue»>Абзац 3</p>
<p class = «red» id = «blue»>Абзац 3</p> |
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Обновим страницу и убедимся в том, что цвет текста синий. Но по сути для нашего абзаца цвет текста задается в трех местах. Во-первых, в селекторе тега – темно-серый. Во-вторых, в классе – красный. В-третьих, в идентификаторе.
Какой вывод из этого эксперимента? А то, что класс приоритетнее селектора тега, а идентификатор приоритетнее класса. Еще одно важное утверждение, которые вы должны понять для себя: стилевые классы обычно используют для стилизации группы элементов (пункты меню, группа абзацев, ряд картинок), а идентификаторы – для стилизации одиночных элементов, уникальных на сайте (шапка, подвал, какая-то иконка, логотип и т.д.).
Переопределение с помощью встроенных стилей
Любому html-элементу можно встроить стили прямо в тег, прописав их с помощью атрибута style. Если мы сделаем так:
<p class = «red» id = «blue» style = «color: green»>Абзац 3</p>
<p class = «red» id = «blue» style = «color: green»>Абзац 3</p> |
Смотрите, у нашего параграфа уже куча свойств, определяющих оформление. Но его текст станет зеленым, как это описано в атрибуте style. Почему? Да потому что внутренние стили имеют самый высокий приоритет.
Ломаем все правила с помощью !important
Мы подобрались к css-приему, который ломает все правила приоритетности и отправляет их в мусорное ведро. Это запись !important, которая помечает свойство как самое важное. Давайте рассмотрим тот же самый пример. У нас есть параграф, его код приведен выше. Как видно, для него записано аж 4 разных варианта цвета.
В частности, в селекторе тега указан темно-серый цвет, но он перебивается классом, идентификатором и внутренними стилями, которые в нашем случае перебивают все остальное. Но есть простой способ перебить все это. Запишем так:
p{ font-size: 16px; color: #333 !important; }
p{ font-size: 16px; color: #333 !important; } |
То есть те же самые стили для селектора всех абзацев, только при определении цвета после значения дописано !important. Эта команда помечает стиль как важный. То есть тот, который обязательно должен применится. Ну проверим:
Все абзацы одного цвета – темно-серого. Заметьте. Что ни класс, ни идентификатор, ни даже встроенные стили, которые по идее применяются в последнюю очередь и должны перебивать все, не могут переопределить цвет и он остается таким, каким он задан в селекторе тега.
Вот такие пироги. Правда, я советую вам не прибегать слишком часто к !important. А если нет острой нужды, то вовсе не прибегать. Естественно, если вы пропишите для стилевого класса !important, то уже этот стиль будет самым важным. Причем в состязании: селектор тега !important и класс !important, победит класс. И вы уже понимаете, по какой причине. Ну и так далее. Получается, что можно встроенному стилю тоже дописать !important. Вот это будет уже конечное переопределение, которое невозможно перебить.
Ну опять же, не советую вам слишком много играться с important, это считается плохим тоном верстки.
Итог
Окей. С переопределением мы вроде разобрались. Конечно, мы рассмотрели не все способы переопределения. О некоторых вы можете догадаться и сами. Например, использование вложенных селекторов. В принципе можно легко догадаться, что абзацы в боковой колонке легко отделить от абзацев в основной части сайта.
#sidebar p{} #content p{}
Заметьте, что тут мы никаких классов и идентификаторов именно абзацам не задавали. Ну а уровень вложенности селекторов может быть любым. Вы можете написать хоть так:
#content article .block-header .left-b p{}
#content article .block-header .left-b p{} |
Все зависит от сложности разметки. Помимо комбинированных селекторов есть и масса других, помогающих так или иначе переопределить оформление. Их вы сможете изучить, если более серьезно возьметесь за изучение css. Например, предлагаю пройти наш курс по CSS3, в котором вы как раз сможете познакомиться с кучей новых интересных селекторов.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
СмотретьПриоритеты CSS-стилей « Веб-заметки и Веб-подсказки
Приоритеты CSS-стилей
2010-07-16
В следующем списке приведены методы задания стилей с приоритетом по убыванию:
1) !important — флаг, который применяется к стилю и имеет всегда самый высокий приоритет. С помощью !important можно переопределить даже стиль, заданный непосредственно в элементе с помощью атрибута style.
Примет:
<style type="text/css">
span {color: red;}
span {color: green !important;}
span {color: blue;}
</style>
<span>мой текст</span>
Примечание: !important не советуется использовать в разработке. Он используется только в исключительных случаях для быстрых фиксов.
2) Стили заданные непосредственно в элементе с помощью атрибута style.
Примет:
<span>мой текст</span>
3) Стили, примененные к уникальному идентификатору (атрибут id) элемента.
Примет:
<style type="text/css">
#element_id {color: orange;}
</style>
<span>мой текст</span>
4) Стили, примененные к классу (атрибут class) элемента.
Примет:
<style type="text/css">
.element_class {color: red;}
</style>
<span>мой текст</span>
5) Стили, примененные к HTML-тэгу.
Примет:
<style type="text/css">
span {color: yellow;}
</style>
<span>мой текст</span>
Примечание: Если заданы разные значения одного стиля в разных местах и они имеют одинаковый приоритет, то будет применен самый последний стиль.
Общий пример:
<style type="text/css">
div {color: gray !important;}
span {color: black;}
#element_id {color: green;}
.element_class {color: blue;}
span {color: orange;}
</style>
<div>просто div</div>
<div>div c атрибутом style</div>
<span>Просто span</span><br />
<span>span с заданным классом</span><br />
<span>span с заданным классом и идентификатором</span><br />
<span>span с заданным классом и атрибутом style</span><br />
Результат:
просто div
div c атрибутом style
просто span
span с заданным классом
span с заданным классом и идентификатором
span с заданным классом и атрибутом style
CSS Div&Classes Приоритеты Стиля — CodeRoad
Недавно я изучал некоторые HTML & CSS, и у меня был вопрос о том, как работают приоритеты стиля CSS, а также Какой стиль применяется, когда у нас возникают конфликтные ситуации.
Итак, давайте рассмотрим следующий код:
.container {
color: green;
}
.things {
color: blue;
}
p#item {
color: yellow;
}
#item {
color: orange;
}
.things .container {
color: brown;
}
p.things {
color: red;
}<div>
<p>A</p>
<p>B</p>
<div>C</div>
<p>D</p>
</div>Теперь, основываясь на предоставленном нам ключе ответа, цвета различных элементов: A-синий, B-желтый, C-коричневый и D-Красный. Теперь B & D, Я нахожу довольно легко понять. Однако я не понимаю, как A & C получил те цвета, которые они получили. Я думаю, что по существу я изо всех сил пытаюсь понять, почему A & C не одного цвета. Может ли кто-нибудь объяснить, как все это работает?
Спасибо
html css css3Поделиться Источник David West 05 февраля 2015 в 07:02
5 Ответов
2
CSS-это Каскадная таблица стилей, которая означает, что стили применяются сверху вниз. Первый <div> сначала получает стиль color:green из контейнерного класса, но затем он перезаписывается color:blue классом things. Теперь, поскольку первый тег <p> внутри этого div не нацелен на какой-либо CSS, он наследует цвет от своего родителя, который является синим, следовательно, A становится синим.
Что касается C, то самый низкий селектор, предназначенный для C, — это селектор .things .container , предназначенный для элементов с классом контейнера, которые находятся внутри элемента с классом things, в результате чего C становится коричневым.
Также проверьте другие ответы для получения информации о специфике.
Поделиться Thijs Riezebeek 05 февраля 2015 в 07:09
2
Давайте разберемся в стилях один за другим,
Здесь вы все окрашиваете в зеленый цвет, по умолчанию
.container {
color: green;
}
Теперь вы переписываете (только те элементы, которые имеют оба класса container и things ) на синий цвет,
.things {
color: blue;
}
(в вашем случае это родительский div, поэтому все теперь будет иметь синий цвет )поэтому здесь все, включая A и C , становится синим
Так что здесь ,
A-> Blue
B-> Blue
C-> Blue
D-> Blue
Теперь вы окрашиваете контейнер, который находится внутри вещей(так что только C удовлетворяет этому условию), чтобы брови, таким образом, c были коричневыми. .things .container { цвет: коричневый;
}
Так что здесь ,
A-> Blue
B-> Blue
C-> brown
D-> Blue
Также,
p#item{
color: yellow;
}
#item {
color: orange;
},
здесь, хотя #item наконец окрашен в оранжевый цвет, все же p#item имеет наибольшую специфичность , поэтому цвет для B становится желтым
Так оно и становится,
A-> Blue
B-> yellow
C-> brown
D-> Blue
И наконец вы даете этот стиль,
p.things {
color: red;
}
Только D удовлетворяет этому правилу, поэтому D становится красным
Так что конечный результат таков,
A-> Blue
B-> yellow
C-> brown
D-> red
Поделиться Naeem Shaikh 05 февраля 2015 в 07:14
2
CSS стили применяются сверху вниз, и если вы применили несколько классов на 1 элемент, как ваш .container класс сначала применяет color:green , который перезаписывается color:blue из .things класса.
Итак, сначала вы применили класс .container , который изначально применяет color:green ко всем элементам DOM. Затем класс .things перезаписывает стиль, применяя ‘color:blue’ , который показывает A синим цветом. Затем B берет стиль из класса .item и изменяет его color:blue на color:yellow , а затем вы снова применяете класс .container к <div> , который содержит C, который снова перезаписывает color:blue на color:green . И в конце вы применили класс .things к вашему <p> , который перезаписывает color:blue на color:blue .
Но если вы запутались в порядке следования классов CSS, вы можете перезаписать стиль, принудительно применив нужный цвет, используя !important в конце ваших стилей.
как в вашем классе контейнеров :
.container {
color: green !important;
}
он будет применять один и тот же цвет на A и C независимо от порядка классов или стилей, он всегда применяет зеленый цвет к элементу, который содержит несколько классов, включая .container . и другие классы.
Здесь Работает Fiddle.
Редактировать:
Если вы хотите, чтобы стиль не был перезаписан каким-либо классом и всегда применялся стиль(имеется в виду все стили, включая цвет), который вы определили с помощью !important .
Поделиться Suhaib Janjua 05 февраля 2015 в 07:17
1
CSS он сказал, что сильные всегда побеждают. Смотрите его ссылку, чтобы вычислить, что ruke сильнее других: css-специфика
По сути, ID -это сильнее, чем класс , который сильнее, чем элементы . Стиль elements (inline ) сильнее, чем Id, и там опять же сильнее, чем inlin: the !важно; так что
!важно; > inline > Id > class > elements. Вы можете объединить несколько идентификаторов, классов или элементов, чтобы сделать разницу.
Если некоторые правила точно равны, то последние пользуются преимуществом.
Смотрите эту забавную картинку, чтобы понять ее:
Поделиться clement 05 февраля 2015 в 07:19
0
в простом слове, более конкретный выбирается так, например, если вы добавляете эти строки кода:
<p>D</p>
p.things#ye{color:black}
D будет черным, потому что у тебя было больше селекторов.
Поделиться Daniel 05 февраля 2015 в 07:14
Применение стиля css к нескольким шаблонам
Как я могу применить блок стиля CSS к нескольким различным классам? Например, у меня есть <div class=foo>…</div> <div class=bar>…</div> … .foo .bar ??? // This selector…
Как я могу изменить определение стиля CSS, чтобы сделать границу на определенном div
У меня есть это определение стиля css: [class*=col-] { border: 1px solid #dddddd; } Определение стиля css выше делает границу для всех столбцов сетки bootstrap на моей странице. Но мне нужно…
CSS селектора, встроенного стиля атрибут
Есть ли селектор CSS, чтобы выбрать этот элемент по его встроенному значению атрибута стиля? <div>…</div> что-то вроде div[cssAttribute=cssValue]
Как динамически изменить атрибут стиля CSS тега DIV?
У нас есть тег div: <div style=background-color:red></div> Я хотел бы знать, как мы можем изменить атрибут стиля этого тега div:- Можно ли очистить значение стиля? Можно ли…
JQuery-Показать / Скрыть переопределение атрибута стиля css
Я понимаю, как CSS работает в том, что стиль, примененный ближе всего к элементу, переопределяет любые предыдущие стили. Мой вопрос заключается в том, как работают функции JQuery show() и hide() ,…
Как напечатать div с поддержкой стиля?
Я хочу распечатать содержимое div со стилем (отдельный файл .css). Я много пробовал, но не смог напечатать с поддержкой стиля. Пожалуйста, помогите мне!
CSS Приоритеты Правил
Дана следующая наценка… <div id=Header> <a href=# class=Highlight>foo</a> </div> И следующая таблица стилей… /******************Exceptions******************/ #Footer,…
Все правила стиля css удаляются из одного элемента div, но не из других элементов
Я пытаюсь создать заголовок для веб-сайта, где заголовок сайта отображается поверх изображения. Я настроил его на использование элемента класса div с фоновым изображением. Однако я не могу понять,…
DIV Active state-изменение стиля
Я создал 04 кнопки и определил активные состояния для каждой кнопки в CSS. Эти активные состояния вызываются в JS, так что он изменяет свойство стиля div при нажатии, а затем сбрасывает свойство при…
Очистить div и его содержимое от любого стиля CSS
Это может быть странный вопрос, но я пытаюсь сделать div, который будет действовать как своего рода панель предварительного просмотра для почтового сообщения HTML, в котором я хочу убедиться, что…