CSS класс внутри ID выигрывает

Два вложенных DIV-х, внешняя идентифицируется идентификатором и внутренний идентифицируется класс:CSS класс внутри ID выигрывает

<div id="theID"> 
    <div class="aClass">Class inside ID</div> 
</div>

Допустим, у нас есть правила, как для класса и ID

.aClass {color: green; } 
#theID { color: yellow; }

По моему пониманию, оба правила применяются к тексту, поэтому победитель должен иметь более высокую специфичность (#theID).

Однако по какой-то причине правило класса выигрывает, а текст отображается зеленым.

Почему?

источник

2013-03-31 vlad.london

Я рекомендую вам прочитать все [раздел 6 спецификации CSS 2.1] (http://www.w3.org/TR/CSS2/cascade.html) В нем объясняется процесс установления используемых значений для элементов, в том числе, как работает каскад, место специфики в этом и где применяется наследование процесса. – Alohci

#theID более специфичен для внешнего div (прямой стиль, в отличие от унаследованного стиля), поэтому весь текст внутри там будет желтым. Однако .aClass более специфичен для внутреннего div, поэтому все внутри него будет зеленым (прямой стиль) не желтым (унаследованным стилем).

источник

2013-03-31 02:22:13

Использование слова «конкретный» здесь путается, учитывая, что CSS имеет очень специфическое определение специфичности. – BoltClock

Браузер собирает/считывает информацию css от внешних к внутренним элементам.

Внешний элемент будет называться первым, а затем внутренними элементами.

<div id="theID"> 
    I am Yellow 
    <div class="aClass">I am Green</div> 
</div>

другой пример:

<div id="theID"> 
    I am Yellow 
    <div class="aClass"> 
     <span style="color:purple"> 
      I am purple 
     </span> 
    </div> 
</div>

Последний элементы стиля всегда победит.

источник

2013-03-31 02:48:48

Каждый элемент имеет все свойства CSS. В этом случае есть два элемента div, и каждый из них имеет свой собственный объект color. Эти свойства указаны здесь явно для обоих элементов, без противоречивых правил CSS, поэтому нет никаких вопросов о специфичности или наследовании.

Текст «Внутренний код класса» является текстовым содержимым внутреннего элемента div, поэтому он получает свой цвет. Параметр color для внешнего элемента затрагивал бы любой текст внутри этого элемента, который не был обернут внутренним элементом с его собственным набором цветов, но такого текста нет, поэтому этот параметр не влияет.

источник

2013-03-31 10:53:09

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

В противном случае применяется таблица стилей родителей, которая рассчитывается аналогичным образом.

Еще одна иллюстрация:

<div id="theID"> 
    <div class="aClass"> 
     <p>Class inside ID and within P</p> 
    </div> 
</div>

И CSS:

.aClass p { 
    text-transform: lowercase; 
} 
#theID p { 
    text-transform: uppercase; 
}

Здесь оба правила применяются непосредственно к <p> элементу, Buth из этих двух второе относится, имеющие более высокую специфичность в связи с наличием Селектор ID.

Таким образом, полученный текст будет иметь верхний регистр.

источник

2013-03-31 11:55:46

Да, это правильно. Специфика становится не-проблемой, когда правила полностью нацелены на разные элементы. – BoltClock

CSS класс внутри ID выигрывает

ответ

Смежные вопросы