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

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

10 голосов
/ 22 июля 2010

Большой жирный колпачок-блокировка TL; DR:

Я ЗНАЮ, КАК ОПРЕДЕЛЕНА СПЕЦИФИЧНОСТЬ СЕЛЕКТОРА, Я ДУМАЮ, ЧТО ИСПОЛЬЗУЮ НЕДОПУСТИМЫЕ ПРЕДЛОЖЕНИЯ, И Я МОГУ ВЕРНУТЬСЯ МОИМИ РАЗГОВОРЫМИ С ДЕЙСТВУЮЩИМ КОМПЛЕКСОМ ТЕОРИИ ОТНОШЕНИЯ, ПОЖАЛУЙСТАНЕ ОТВЕТИТЬ НА ПОЯСНИТЕЛЬНЫЕ ПРАВИЛА РАСЧЕТА W3, ПОЖАЛУЙСТА, ПРОЧИТАЙТЕ ВОПРОС <- прочитайте это. </p>

Это беспокоит меня некоторое время, когда я пишу стиль для некоторого 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 будет идентифицировать группу по ее отношению к элементу по имени.Совершенно нелогично называть именованный элемент менее конкретным, чем неназванная группа с именованным отношением.

Ответы [ 4 ]

9 голосов
/ 22 июля 2010

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

Добавлено при редактировании: Встроенный styleтогда будет мятежным ребенком, и !important суровым родителем. Редактировать: Я сохранил это для юмора, но я не думаю, что это отражает идею, а также мое более позднее утверждение ниже.

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

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

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

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

или дать телу идентификатор и 

#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 будет последним уникальным словом в этом вопросе, потому что ничего более конкретного не нужно говорить.Скорее, однако, хотя документация может не указывать это как таковую, «селективность» действительно структурирована на предоставлении права доступа .Кто имеет больше всего «прав» на управление стихией, и кто получил «галстук», кто был последним, кому были предоставлены эти права.

3 голосов
/ 22 июля 2010

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

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

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

1 голос
/ 22 июля 2010

Как

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

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

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

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

Пример

  • внешний диапазон: 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 против #outer) заслуживает дополнительной специфичности.

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

0 голосов
/ 22 июля 2010

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

Учтите это:

Вы знаете, как рассчитывается специфичность 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.Я лично считаю, что это сделает весь процесс более запутанным и трудным для определения, но вы можете не согласиться.

...