Почему # селектор меньшей специфичности, чем что-либо?

Большая жирная крышка-замок TL; DR:

Я ЗНАЮ, КАК ОПРЕДЕЛЯЕТСЯ СПЕЦИФИКАЦИЯ SELECTOR, Я ДУМАЮ, ЧТО ЭТО ИСПОЛЬЗУЕТ ВОЗМОЖЕННЫЕ ПРЕДПОЛОЖЕНИЯ И Я МОГУ ВЕРНУТЬ МОИ ОБОСНОВАНИЯ С ДЕЙСТВИТЕЛЬНЫМИ ОТНОШЕНИЯМИ ТЕЛЕВИЗИОННЫХ СВОЙСТВ, ПОЖАЛУЙСТА, НЕ ОТВЕЧАЙТЕ РАЗВИТИЕ ПРАВИЛ РЕГУЛИРОВАНИЯ W3 ДЛЯ СПЕЦИФИКА, ПОЖАЛУЙСТА, ПРОЧИТАЙТЕ ВОПРОС < - читать, что.

Это беспокоило меня в течение некоторого времени, когда я пишу стиль для некоторого HTML, который будет похож на ниже:

...
<div id="outer">
    <span id="inner"></span>
    <span></span>
    ...
</div>
...

Почему правила специфичности делают селектор "#outer span" более конкретным, чем "#inner"? Идентификатор уникален, поэтому, когда я говорю "#inner", я могу ТОЛЬКО относиться к одному элементу, так почему он менее конкретный? Я понимаю правила определения специфики, мне просто интересно, было ли это преднамеренным или случайным, также, если кто-нибудь знает, как я могу задать этот вопрос людям, которые пишут стандарты css.

Я должен отметить, что я понимаю, что я МОЖЕТ использовать #outer #inner, чтобы обеспечить максимальную специфичность, но похоже, что он сначала поражает цель идентификатора. Это также проблематичное решение, когда я пишу шаблоны, и я не уверен, что один ID будет внутри другого. Я не ищу обходного пути, просто теоретический ответ.

Мой вопрос - теория, полностью основанная на заданной логике. Хотя у меня есть то, что если вы определяете правило для 1 пункта из n возможных элементов, разве это не так точно, как вы можете идти? Почему создатели селекторов CSS создают правило, которое может определять m элементов из n возможных элементов, где m является подмножеством n в качестве более конкретного правила?

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

ОТВЕТЫ

Ответ 1

Я думаю, что идея "почему" скорее является точкой зрения "поколений" или "авторитета". Если #Parent (любого поколения назад) говорит, что все мои дети, отвечающие квалификации "x" (в вашем случае, span), получат наследование "y" (любое свойство css), это не независимо от того, что хочет одиночный индивид #Child, ему нужен авторитет #Parent, чтобы получить его, если родитель указал иначе.

Добавлено в edit: Встрочный style будет потом непослушным ребёном, а !important - сломанным родителем. Edit: Я сохранил это для юмора, но я не думаю, что это отражает эту идею, а также мое последующее выражение ниже.

Добавлен в вопрос редактирования в комментарии: Подано:

#outer span ...
#inner (which is a span element)

Затем, чтобы помочь обеспечить выбор #inner, я рекомендую:

body span#inner (*edit:* just span#inner works *edit:* if defined later)

или дайте телу id и

#bodyId #inner

Конечно, они все еще могут быть переопределены. Чем больше "поколений" задействовано, тем больше становится сложно изменить поведение из-за поколенческого консенсуса (если великий дедушка и дедушка и родитель все согласны, скорее всего, ребенок не собирается уходить, делая свою собственную вещь).

Мне пришлось переписать этот раздел на более позднем этапе редактирования С учетом этого HTML:

<div id="grandparent">
  <div id="parent">
    <div id="child"></div>
  </div>
</div>

Ранее я утверждал, что "#parent div имеет больший авторитет, чем #grandparent div. Оба имеют авторитет поколений, по сути," равный "авторитет поколений, но первый -" более близкое "поколение". Ошибка в том, что "ближе" к поколению - это не то, что важно, а, скорее, последнее, чтобы получить полномочия. При равных полномочиях полномочия, назначенные последним, выигрывают.

Я полагаю, что я все еще могу согласиться с этим утверждением: с учетом этой мысли селектор типа #child [id] (который перевешивает оба предыдущих селектора) рассматривает его атрибуты как разрешения для большей власти, чтобы управлять тем, что сам контролирует. Наличие # уже предоставило ему полномочия, но недостаточно для переопределения # более раннего поколения, если это раннее поколение также несет другой селектор, предоставляющий больше полномочий.

Итак, #grandparent div перевешивает #Child, но не div#child, если последний получает полномочия [добавлено это], а не #child[id], потому что [id] добавляет больше полномочий для #Child для самого правила. Если равная избирательность, то последняя, ​​которая получит полномочия, выигрывает.

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

В качестве сводного заявления, чтобы ответить "почему" так (и не в соответствии с "установленной" теорией), я считаю, что речь идет не о точности или даже о конкретной специфике (хотя это и есть используемый термин), как и тогда можно было бы ожидать, что #ChildsName станет окончательным уникальным в этом вопросе, потому что ничего конкретного не нужно говорить. Однако, хотя документация может не указывать ее как таковую, "избирательность" действительно структурирована при предоставлении полномочий. У кого больше всего "прав", чтобы управлять элементом, и ему дали "галстук", который был последним, которому были предоставлены эти права.

Ответ 2

Потому что #outer span имеет как селектор идентификаторов, так и селектор элементов. Этот элемент селектора делает его весом больше, чем #inner.

Первое означает "выбрать любой элемент, найденный внутри любого элемента ID outer".
Последнее означает "выбрать любой элемент с идентификатором inner". Он не знает, где #inner находится в вашем документе HTML, следовательно, менее специфичен.

Возможно, вы могли бы попробовать вместо #outer #inner или span#inner попробовать #outer span#inner.

Ответ 3

Как

Правила W3C для расчета специфичности:

  • count 1, если объявление является атрибутом 'style', а не правило с селектором, 0 в противном случае (= a) (В HTML значения элемента Атрибут "стиль" - это таблица стилей правила. Эти правила не имеют селекторов, так что a = 1, b = 0, c = 0 и d = 0.)
  • подсчитать количество атрибутов идентификатора в селекторе (= b)
  • подсчитать количество других атрибутов и псевдоклассов в селектор (= c)
  • подсчитать количество имен элементов и псевдоэлементов в селекторе (= d)

Специфика основана только на формы селектора. В частности, селектор формы "[id = p33]" является считанный как селектор атрибутов (a = 0, b = 0, c = 1, d = 0), даже если id атрибут определяется как "ID" в исходный документ DTD.

Объединение четырех чисел a-b-c-d (в системе с большой базой) дает специфику. Кроме того, когда правила имеют одинаковую специфичность, выигрывает последняя.

Пример

  • внешний диапазон: a = 0, b = 1, c = 0, d = 1 → 101

  • span # inner: a = 0, b = 1, c = 0, d = 1 → 101
  • div # external span # inner: a = 0, b = 2, c = 0, d = 2 → 202

Попробуйте изменить правила 1 и 3: http://jsfiddle.net/Wz96w/

Почему

Моя мысль заключается в том, что #inner не указывает уникальный элемент. Хотя это всего лишь 1 элемент на страницу, этот идентификатор может быть совершенно другим элементом на другой странице.

Одна страница:

<div id="outer">
  <div id="inner"> ... </div>
</div>

Другая страница:

<ul id="outer">
  <li>main1
    <ul id="inner">
      <li>sub1</li>
      <li>sub2</li>
    </ul>
  </li>
  <li>main2</li>
</ul>

Хотя, я бы не стал его кодировать. Я думаю, что это объясняет, почему добавление элемента (ul#outer vs. #outer) заслуживает дополнительной специфики.

В отношении потомков я визуализирую DOM для вашей разметки. Правило #outer span имеет длину пути больше длины #inner. Поэтому в этом случае он задает более конкретное поддерево, поэтому он должен быть удостоен большей специфичности (и #outer #inner li должен быть [стоит] больше, чем #inner li).

Ответ 4

Для меня, и я основываю это на мнении, это ожидаемое "естественное" поведение.

Рассмотрим это:

Вы знаете, как вычисляется специфика CSS, и из этой формулы мы знаем, что #outer span более специфичен, чем #outer, что необходимо для правильной работы CSS в целом, и это имеет смысл. #outer span также более конкретный, чем #inner, который также является логическим в домене таблицы стилей (#inner - это только идентификатор, а #outer span - это идентификатор плюс элемент, поэтому для ранжирования их, если мы просто смотрят на таблицу стилей, более квалифицированный должен быть более конкретным).

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

  • Это <span id="inner"> находится внутри <div id="outer">
  • Правила стилей для #outer span и #inner применяются
  • Правило #outer span более конкретно, чем #inner
  • Но подождите! <span id="inner"> находится внутри <div id="outer">, поэтому игнорируйте вычисления на основе таблицы стилей и утверждайте, что #inner более конкретный

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