Css-проблема: размер шрифта

Question

У меня проблема css, которую я, похоже, не понимаю :) Я уже три года работаю над css, но у меня никогда не было этой проблемы.

Я объявил несколько стилей в моем css-файле, которые должны применяться к содержимому моей страницы.Как правило, это правильный CSS, но есть некоторые исключения, такие как page_child_title.У меня сложилось впечатление, что если бы я в дальнейшем объявил стиль в моем css для определенных классов, он бы переопределил более ранние объявления css.ну, теперь, в этом случае, это не так.Когда я проверяю с помощью firebug, кажется, что мой браузер действительно хочет использовать font-size-css «.page a» вместо «.page_child_title» (и я, например, не согласен с моим браузером).Однако цвет ".page_child_title" применяется правильно.Ниже вы можете найти HTML и CSS, о которых я говорю.

HTML

<div id="page" class="page Jobs">
    <div class="page_child">
        <a class="page_child_title" ...

Style.css

.page p, .page ul, .page a {
    font-size: 10px;
    text-align: justify;
}
style.css (line 208)


.page_child_title {
    color: #006633;
    font-size: 12px;
}
style.css (line 262)

Я уже пытался заменить ".page_child_title" на ".Jobs a", но это не сработало.Затем я попытался объявить «.page_child_title» перед «.page a», тот же результат, так что теперь я застрял.Кто-нибудь знает, что может быть причиной этой проблемы?

Answer 1

.page a - более конкретный селектор. Поэтому его настройки будут использованы.

Это явление называется css специфичность :

http://css -tricks.com / 855-конкретика-на-CSS-специфичностью /

a.page_child_title { ... } будет работать.

Answer 2

Мне кажется, что выбор элемента по его типу, а не по имени класса будет более конкретным.

Попробуйте изменить .page_child_title на a.page_child_title

Пример .

Answer 3

Существует два решения:

1. http://jsfiddle.net/ErsS4/

Изменение page_child_title to

a.page_child_title

Или

1. http://jsfiddle.net/m5V8f/

Этот переход является прямой ссылкой на элемент.

Надеюсь, это поможет!

Answer 4

Простое исправление должно изменить ваш стиль на

a.page_child_title

Я считаю, что это как-то связано с иерархией CSS и объявлением стиля a.