Наследование и специфика CSS - PullRequest
Новая
       13

Наследование и специфика CSS

0 голосов
/ 10 июля 2011

У меня проблемы с таблицей стилей CSS. Я сузил это, чтобы быть о наследовании и специфичности в стилях CSS.

Прямо сейчас (упрощенно) У меня есть HTML <body>, который выглядит следующим образом: 

<div id="page-wrap">
    <div class="unilogin-wrap">
        <h1 class="unilogin-h1">Hello world!</h1>
    </div>
</div>

Теперь, это часть формы единого входа, которую необходимо использовать на нескольких веб-сайтах, и, следовательно, она имеет отдельную таблицу стилей для определенного стиля unilogin. Однако в таблице стилей сайта (style.css) установлено следующее: 

#page-wrap h1{
    font-size:18px;
    margin-bottom: 18px;
    margin-left:15px;
}

А в таблице стилей unilogin (unilogin.css) установлено следующее: 

.unilogin-wrap h1.unilogin-h1 {
    padding:0;
    margin:0;
    font-size:18px;
    color:#596168;
    text-shadow: 1px 1px 0px #fff;
}

Однако это не переопределит унаследованный стиль h1 из style.css. Если я поставлю #page-wrap h1.unilogin-h1{} вместо этого, он работает просто отлично. Это не вариант, хотя он должен работать на нескольких веб-сайтах с разными таблицами стилей, которые я не могу просто изменить.

Есть ли способ переопределить специфику унаследованного стиля h1 во второй таблице стилей без использования встроенного стиля html? (Я знаю, что html-атрибут style = "" обладает большей специфичностью, но я предпочитаю сохранять стили в таблице стилей).

Спасибо ...

Ответы [ 2 ]

1 голос
/ 10 июля 2011

попробуйте изменить .unilogin-wrap h1.unilogin-h1 {

до 

#unilogin-wrap h1.unilogin-h1 {

, поскольку .unilogin-wrap действует на <whatever class="unilogin-wrap" и #unilogin-wrap на <whatever id="unilogin-wrap"

0 голосов
/ 10 июля 2011

Более структурное решение: дать # обтекание класса также 

<div id='page-wrap' class='page_wrap'>

и затем обратитесь к классу при установке общих стилей. (Использование идентификатора только для абсолютного позиционирования и индивидуального скрытия / показа)

Другой подход использует! Важный 

 margin:0 !important;

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

...