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

Рассмотрим следующее:

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

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

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

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

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

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

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

Как

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

• считать 1, если объявление из является атрибутом '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 исходного документа.

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

Пример

• outer span: a=0, b=1, c=0, d=1 --> 101

• span#inner: a=0, b=1, c=0, d=1 --> 101
• div#outer span#inner: a=0, b=2, c=0, d=2 --> 202

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

Почему

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

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

<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).