Вопрос: Какого цвета будет знак вопроса в ссылке?
Ответ: Красного, неважно что селектор на точное совпадение атрибута выглядит более специфичным, чем селектор который выбирает все что «начинается с». Вес они имеют одинаковый.

Вопрос: Мой оригинальный запатентованный вопрос.
Ответ: !important круче всего, даже круче чем инлайн стили – так что бам-бам-бам – серого!

Исходники всех тестов лежат

В данной главе подробно объясняется, почему каскадные таблицы стилей (Cascading Style Sheets, CSS) называются каскадными. Для начала давайте вспомним, какими способами можно добавить стиль на веб-страницу:

• подключить внешнюю таблицу стилей;
• добавить внутреннюю таблицу стилей в HTML-документ через тег . В итоге цвет тегов

  Будет красным.

  Это – один из способов управлять значимостью стилей. Еще один способ повысить приоритет – специально увеличить вес селектора, например, добавив к нему ID или класс.

  Объявление!important

  Если вы столкнулись с экстренным случаем и вам необходимо повысить значимость какого-либо свойства, можно добавить к нему объявление!important:

  P {color: red !important;} p {color: green;}

  Также!important перекрывает inline-стили. Слишком частое применение!important не приветствуется многими разработчиками. В основном, данное объявление принято использовать лишь тогда, когда конфликт стилей нельзя победить иными способами.

  Сброс стилей с помощью reset.css

  В предыдущей главе мы уже упоминали о том, что у каждого браузера есть свои встроенные стили HTML-документов, созданные для улучшения читабельности. Вы наверняка уже видели, как выглядит «голая» веб-страница в браузере: синие подчеркнутые ссылки, черный шрифт, полужирное начертание заголовков и т. д.

  Каждый браузер имеет свои отличия во встроенных стилях: например, в IE нет отступа от верхнего края окна, а в Firefox есть. Таких отличий существует много. Чтобы они не создавали помех для кроссбраузерности при написании собственного стиля CSS, можно воспользоваться методом сброса встроенных стилей.

  Инструмент для сброса стилей – это, по сути, та же самая таблица CSS, где описаны правила, которые сбрасывают встроенные стили браузеров, устанавливая базовые значения свойств. Называется такая таблица reset.css и служит для того, чтобы вы могли начать создавать стиль «с нуля». Вот пример стандартной таблицы сброса:

  Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; }

  HTML — основа всех веб-сайтов, служит для размещения основного контента на сайте. Если запустить HTML код в браузере, то можно увидеть текст, картинки и ссылки, которые не особо радуют глаз. Чтобы сделать красивые элементы и создать хороший дизайн веб-страницы нужно воспользоваться CSS

  CSS — язык стилизации веб-элементов. Он берет отдельную часть контента или всю страницу целиком, изменяя её визуальную составляющую. Чтобы свойства CSS применялись, им нужно на что-то ссылаться. Для этого используются селекторы, которых существует огромное множество.

  Селекторы. CSS

  Селекторов существует огромное количество, от общих(ссылающихся на все элементы веб-страницы) до тегов, классов и идентификаторов.

  Общие селекторы

  "*" — основной селектор в CSS. Он ссылается на каждый элемент веб-страницы находящийся в теге {body}. Чаще всего используется для обнуления отступов на странице:

  CSS

  Скопировать

  Селекторы тегов. CSS

  Данный селектор ссылается на каждый указанный тег. Например, если задать изменение шрифта для тегов p, то каждый параграф будет иметь этот стиль. Классы и идентификаторы используются чаще, но теги тоже имеют широкое применение. Например, когда нужно задать общие стили для тега body — шрифт, фон, отступы и т.д.

  CSS

  body {

  font-family: "Tahoma", serif;

  Скопировать

  Селекторы id. CSS

  Идентификаторы используются чаще чем обращение ко всем тегам. В основном, они используются для уникального элемента веб-страницы, который имеет индивидуальный дизайн. Это обусловлено тем, что один идентификатор можно задавать только для одного элемента страницы.

  Через id можно обращаться и к другим элементам, используя его как родительский селектор. Об этом позже.

  Чтобы использовать селектор идентификатора, задайте его в html, с помощью атрибута id. Введите его в css документе с решеткой вначале, без пробелов.

  HTML

  Hello World!

  Любой тестовый текст

  Скопировать

  В CSS выглядит как:

  CSS

  body {

  font-family: "Tahoma", serif;

  background-color: rgba(235, 52, 52, 0.52);

  color: rgba(255, 255, 255, 0.71);

  #head {

  font-size: 1.8rem;

  text-align: center;

  padding: 15px 0;

  Скопировать

  Селекторы Классов. CSS

  Классы используются чаще всех остальных селекторов. Они имеют более широкий функционал чем id, так как могут задаваться до нескольких элементов.

  С помощью этого селектора можно выделить несколько элементов для определенного стиля. Например, чтобы отличить кнопочные ссылки от обычных.

  Для начала задайте имя класса для элемента, через атрибут class. После этого можно обратиться к нему через css. Введите его название, с точкой вначале.

  HTML файл остаётся прежним в основе, но к нему добавляется новый атрибут из CSS:
  

  В CSS это выглядит как:

  CSS

  Text {

  font-size: 1.1rem;

  text-align: center;

  padding: 10px 0;

  Скопировать

  Родительские и селекторы. CSS

  Эти указатели немного отличаются от предыдущих и имеют свои уникальные функции.

  Контекстные селекторы позволяют обратиться не ко всему контенту, который находится внутри элемента, а к некоторым его частям. Может послужить заменой классам. Существует несколько типов родительских селекторов, которые применяются ко всем потомкам и только к прямым.

  Чтобы обратиться к прямым потомкам элемента используйте запись X Y. Например, чтобы стилизовать все ссылки внутри параграфов, используем селектор "a"

  CSS

  color: rgba(255, 255, 255, 0.65);

  font-weight: bold;

  Скопировать

  Второй способ обращения к потомкам более конкретный. Например, если в теге

  содержится многоуровневый список, а нужно обратиться только к элементам первого уровня. Для этого используйте запись

  >

  .

  Стили применяются только к тем тегам

  , которые находятся внутри самого элемента
  . К элементам, которые находятся внутри
  , стили применяться не будут.
  Соседние селекторы применяются к тем элементам, которые находятся рядом с указателем. Допустим у вас на странице такой текст:
  Тег span находится по соседству с тегом . Поэтому, чтобы обратиться к нему, используем запись + .
  Селекторы атрибутов. CSS
  Дают возможность обратиться не ко всем элементам страницы, а лишь к тем, которые имеют определенный атрибут.
  В HTML это выглядит как:
  HTML
  Скопировать
  В CSS это выглядит как:
  CSS
  color: darkblue;
  text-decoration: none;
  Скопировать
  Можно сослаться на атрибут с определенным значением. Таким образом, для того, чтобы сослаться на ссылки, которые открываются в новой вкладке, необходимо сделать следующую запись:
  Приоритеты
  По приоритету селектору располагаются следующим образом.
  1. #id:not — id c псевдо-классом отрицания. Специфичность — 101.
  2. #id — простой идентификатор. Специфичность — 100.
  3. p.green.bold — тег с двумя классами. Специфичность — 21.
  4. body section div.header — третий потомок тега с классом. Специфичность -13.
  5. body section div — третий потомок тега. Специфичность — 11.
  6. div p — второй потомок. Специфичность — 2.
  7. p — обращение к тегу элемента. Специфичность — 1.
  8. * — обращение ко всем элементам. Специфичность — 0.
  Чем выше специфичность, тем выше приоритет.
  Свойства селекторов. CSS
  В языке CSS существует огромное количество свойств, которые и задают стили элементов. Для создания нужно указать селектор, а затем уже свойство, в фигурных скобках.
  Заключение
  Знание работы селекторов и их приоритетов позволит избежать множества ошибок при разработке веб-сайтов. Чтобы закрепить знания на практике, создайте страницу с заголовками, параграфами и списками. Измените их шрифт, цвет и отступы. Для отступов используйте общие селекторы, а для цвета и шрифтов используйте обращения к тегам элементов.
  Теги:
  От автора: представьте специфичность в виде оценки или степени, которая решает, какие стили применить к элементу. Универсальный селектор (*) имеет низкую специфичность. Селектор id – высокую. Родительские селекторы типа p img и дочерние селекторы типа.panel > h2 имеют более высокую специфичность, чем типовые селекторы p, img и h1.
  По началу, кажется, сложно вычислить точное значение специфичности. В спецификации Selectors Level 3 говорится, что для этого вам необходимо:
  проигнорировать универсальный селектор.
  Значения А, В и С вместе дают конечное значение специфичности. ID селектор типа #foo имеет специфичность 1,0,0. Селекторы атрибутов типа и классы типа.chart имеют специфичность 0,1,0. Если добавить псевдокласс типа:first-child (например, .chart:first-child), специфичность станет 0,2,0. А простые типовые или элементные селекторы типа h1 и p дают всего лишь 0,0,1.
  Заметка: вычисление специфичности
  Выучить и вычислить специфичность селектора можно с помощью ресурсов Specificity Calculator от Keegan Street и CSS Explain от Joshua Peek.
  Сложные селекторы и комбинаторы дают, естественно, большую специфичность. Разберем пример CSS:
  ul#story-list > .book-review { color: #0c0; } #story-list > .book-review { color: #f60; }
  ul #story-list > .book-review { color : #0c0; #story-list > .book-review { color : #f60;
  Эти правила похожи, но не одинаковы. В первом селекторе ul#story-list > .bookreview находится типовой селектор (ul), ID селектор (#story-list) и класс (.bookreview). Специфичность равна 1,1,1. Во втором селекторе #story-list > .book-review хранятся только ID и класс. Специфичность равна 1,1,0. Несмотря на то, что #story-list > .book-review объявлен ниже ul#story-list > .bookreview, высокая специфичность последнего заставить элементы с классом.book-review окраситься в зеленый, а не оранжевый цвет.
  Псевдоклассы:link и:invalid имеют ту же специфичность, что и классы. У a:link и a.external будет одна специфичность, равная 0,1,1. Точно так же псевдоэлементы типа::before и::after имеют одинаковую специфичность с типовыми и элементными селекторами. Если два селектора имеют одинаковую специфичность, в дело вступает каскадирование. Пример:
  a:link { color: #369; } a.external { color: #f60; }
  a : link { color : #369; a . external { color : #f60;
  Поддержание низкой специфичность помогает не допустить ползучести селекторов или тенденции постоянного роста специфичности. Такое часто происходит, когда в команде появляются новые разработчики, или когда на сайт добавляются новые формы контента. Ползучесть селекторов также прибавляет головной боли с долгосрочным обслуживанием. Вы либо будете использовать все более специфичные селекторы, чтобы переписывать правила, либо вам придется рефакторить код. Длинные селекторы увеличивают вес CSS файлов.
  В главе 2 мы обсудим, как поддерживать низкую специфичность.
  Заключение
  После прочтения этой главы у вас должно сложиться четкое понимание CSS селекторов. В частности вы должны знать:
  как использовать селекторы и применять стили к конкретным элементам, псевдоэлементам и псевдоклассам;
  понимать различия между псевдоэлементами и псевдоклассами;
  использовать новые псевдоклассы, представленные в спецификациях Selectors Level 3 и 4;
  вычислять специфичность.
  В следующей главе мы расскажем про золотые правила написания обслуживаемого и масштабируемого CSS кода.