Наследование CSS - Почему «более позднее» объявление перезаписывается «более ранним»? - PullRequest
Новая
       16

Наследование CSS - Почему «более позднее» объявление перезаписывается «более ранним»?

2 голосов
/ 01 февраля 2012

Я новичок в html и CSS, но благодаря недавней работе, которую я делал, мне показалось, что я овладеваю тем, как работает CSS. как Java.

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

Однако у меня такое ощущение, что это не так, здесь у меня есть поле с вкладками, над которым я работаю;

html: 

<div id="feature-tabs">
    <ul id="tabs">
        <li><a href="#What We Do">What We Do</a></li>
        <li><a id="large" href="#What Makes Us Different">What Makes Us Different</a></li>
        <li><a href="#Our Background">Our Background</a></li>
        <li><a href="#Why We Do It">Why We Do It</a></li>
    </ul>
</div>

И, конечно, я пометил один элемент списка как «большой», чтобы можно было увеличить его ширину, чтобы он мог поместиться на одной строке.

CSS: 

ul#tabs li a {
    width: 144px;           //TRYING TO OVERRIDE THIS DECLARATION
    height: 33px;
    color: #42454a; 
    background-color: #fff; 
    border-left: 1px solid #000;
    border-right: 1px solid #000; 
    text-decoration: none;
    display: block;
    text-align: center;
    border-radius: 3px;
}
    a#large {
        width: 155px;          //WITH THIS ONE
        display: block;
    }

Происходит следующее: ширина a"large" перезаписывается на a. (144px, а не 155px)

Итак, два вопроса:

  1. Можно ли сделать то, что я пытаюсь сделать здесь - переопределить унаследованную черту?
  2. Можно ли просто выровнять по вертикали каждый из 4-х вкладок, чтобы текст был отцентрирован? (Это могло бы компенсировать уродливый вид, который я получаю от одной кнопки, состоящей из двух строк, где остальные - только одна)

Ответы [ 2 ]

6 голосов
/ 01 февраля 2012

См. Каскадирование .Порядок, в котором встречается CSS, используется только в качестве окончательного варианта.

Оба селектора имеют одинаковый тип носителя.

Оба селектора имеют одинаковую важность и происхождение.

Специфика ваших селекторов различна 

ul#tabs li a         a=0 b=1 c=0 d=3
a#large              a=0 b=1 c=0 d=1

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

Но если вы используете ul#tabs li a#large, он получитвыбрано потому, что обладает наивысшей специфичностью. 

ul#tabs li a#large   a=0 b=2 c=0 d=3
1 голос
/ 01 февраля 2012

Спецификации CSS определяют некоторые «правила специфичности», которые определяют, какие свойства переопределяют другие. Эта статья охватывает его основы.

Селектор ul#tabs li a более специфичен, чем a#large, и поэтому свойства из a#large, также входящие в другой набор правил, игнорируются.

Один из способов - использовать !important: 

a#large {
    width: 155px !important; // !important gives this property precedence
    display: block;
}
...