Основные проблемы CSS - PullRequest
Новая
       6

Основные проблемы CSS

2 голосов
/ 06 апреля 2010

Я думаю, это довольно просто для вас, но я не могу обернуть голову вокруг этого. Я вырвал важную часть. У меня есть текст внутри #content, поэтому я не могу его изменить, и я не хочу использовать! Важный тег. CSS представлен в порядке его размещения в моем файле CSS.

Почему "#content h2 a, #content h2 a: посещения" переопределяет заголовок .post h2 a? 

<html>
    <head>
    .....
    </head>
    <div id="content">
    .....
        <div class="post-header">
            <a href="#">my text</a>
        </div>
    </div>
</html>


#content h2 a, #content h2 a:visited {
    font-family:"arial black","lucida console",sans-serif;
}

.post-header h2 a {
    font-family:Arial,sans-serif;
}

/ Joel

Ответы [ 4 ]

6 голосов
/ 06 апреля 2010

Сначала браузер проверяет каскадный порядок . Поскольку все декларации предназначены для одного носителя, важности и происхождения, правила упорядочены по специфике.

Далее браузер вычисляет специфичность селектора и (вот важная часть вашего вопроса) Id селекторы имеют более высокий приоритет, чем селекторы классов:

Рассчитана специфичность селектора следующим образом:

  • count 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), даже если идентификатор атрибут определяется как «идентификатор» в DTD исходного документа.

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

5 голосов
/ 06 апреля 2010

идентификатор более конкретен, чем класс.В вашем случае вы можете добавить идентификатор перед классом. 

#content .post-header h2 a {
    font-family:Arial,sans-serif;
}
0 голосов
/ 06 апреля 2010

Селекторы на основе идентификаторов имеют прецедент над селекторами на основе классов.

Если вы хотите, чтобы стиль на основе классов переопределял селектор идентификаторов, добавьте! Важное к стилю элемента. 

.post-header h2 a {
    font-family:Arial,sans-serif !important;
}

! Важный не работает в IE6, хотя, если вы заботитесь о таких вещах.

0 голосов
/ 06 апреля 2010

Вы можете использовать следующее: 

.post-header h2 a {
    font-family:Arial,sans-serif!important;
}

Чтобы добавить дополнительный приоритет правилу CSS и убедиться, что оно переопределяет все остальные.

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

Нет похожих вопросов

...