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

Question

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

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

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

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

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

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

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

Это почему?

0

css css-specificity

Источник

user2111134 31 мар '13 в 02:08

4 ответа

Другие вопросы по тегам css css-specificity

user2111134 31 мар '13 в 11:55 2013-03-31 11:55 · Answer 1 · 2013-03-31 11:55

Спасибо всем. Другими словами, приоритизация специфичности используется только в том случае, если к элементу применяется ПРЯМО несколько правил.

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

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

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

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

user2197750 31 мар '13 в 02:22 2013-03-31 02:22 · Answer 2 · 2013-03-31 02:22

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

1

Источник

user2197750 31 мар '13 в 02:22

user1084437 31 мар '13 в 10:53 2013-03-31 10:53 · Answer 3 · 2013-03-31 10:53

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

Текст "Класс внутри ID" является текстовым содержанием внутреннего div элемент, поэтому он получает свой цвет. color установка для внешнего элемента будет влиять на любой текст внутри этого элемента, который не обернут во внутренний элемент с его собственным набором цветов, но такого текста нет, поэтому настройка не имеет никакого эффекта.

user1524622 31 мар '13 в 02:48 2013-03-31 02:48 · Answer 4 · 2013-03-31 02:48

Браузер собирает / читает информацию 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>

Стиль последних элементов всегда победит.