Почему стиль элемента переопределяет класс, установленный для элемента? - PullRequest
Новая
       0

Почему стиль элемента переопределяет класс, установленный для элемента?

1 голос
/ 30 сентября 2011

Наша проблема такая.У нас есть такой фрагмент кода. 

<div class="parent">
    <div class="child">
        <a href="#" class="child_item" onclick="return false;" onfocus="blur();">Item 1</a>
    </div>
    <div class="child">
        <a href="#" class="child_item" onclick="return false;" onfocus="blur();">Item 2</a>
    </div>
    <div class="child">
        <a href="#" class="child_item" onclick="return false;" onfocus="blur();">Item 3</a>
    </div>
    <div class="child">
        <a href="#" class="child_item" onclick="return false;" onfocus="blur();">Item 4</a>
    </div>
    <div class="clear">
    </div>
</div>

Это все в глобальном контейнере с классом .content.

Код CSS: 

.content a
{
    font-size: 11px;
}

.parent a
{
    font-size: 16px;
}

По какой-то причиневместо применения .parent a браузеры применяют .content a.
Что не так и почему применяется контейнерный CSS вместо более близкого .parent CSS?

Ответы [ 3 ]

6 голосов
/ 30 сентября 2011

Оба правила имеют одинаковую специфику, поэтому любое правило, которое будет последним в объявлениях стилей, победит ... Вы уверены, что .parent a -правило указано после .content a -рула?

Другим способом ее решения было бы немного увеличить специфичность, то есть:

.parent .child_item { font-size: 16px; }

Редактировать : вы можете поиграть с вашимтестовый пример здесь: http://jsfiddle.net/gburw/ Чтобы доказать мою точку зрения, попробуйте переключить CSS-объявления, и вы увидите, что любое правило, которое будет определено последним, будет «выигрывать».

Редактировать 2 : Вы можете узнать больше о специфике CSS здесь .Это довольно простая концепция, сложная часть которой заключается в том, чтобы избежать войн за специфичность с другими разработчиками =) Так что вам следует придумать стандартный способ написания CSS в своей компании.Следовать рекомендациям Pagespeed и YSlow тоже всегда хорошая идея.

1 голос
/ 30 сентября 2011

Или, если вы действительно хотите применить .parent a.Вы можете сделать это: 

.parent a{
   font-size:16px !important;
}

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

0 голосов
/ 30 сентября 2011

Похоже, проблема CSS Specificity .Убедитесь, что ваши CSS-селекторы действительно: 

.content a
{
    font-size: 11px;
}

.parent a
{
    font-size: 16px;
}

, а не что-то вроде #container .content aВы также можете увеличить специфичность с .parent a до .parent .child a, если это не так.

...