Родитель <ul>переопределяет стиль ребенка

Question

Это моя разметка:

<div id="nav">
    <ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li>
            <a href="#">Articles</a>
            <ul class="inside-ul">
                <li><a href="#">Article 1</a></li>
                <li><a href="#">Article 2</a></li>
                <li><a href="#">Article 3</a></li>
            </ul>
        </li>
        <li><a href="#">Page 3</a></li>
    </ul>
</div>

Я применяю стилизацию к родителю <ul> следующим образом:

#nav ul {
    something;
}

#nav ul li {
    something;
}

#nav ul li a {
    something;
}

И я применяю стилизацию к ребенку <ul> вот так:

.inside-ul {
    something;
}

.inside-ul li {
    something;
}

.inside-ul li a {
    something;
}

Но проблема в том, что дочерний элемент <ul> (.inside-ul) вообще не меняется, он как будто наследует все от своего родителя. Я пытался использовать !important в своем файле CSS, но он все еще остается прежним.

Вот изображение того, что происходит:

http://i47.tinypic.com/w1brkw.jpg

Надеюсь, я четко объяснил, спасибо.

Answer 1

Изменить это:

.inside-ul {
    something;
}

.inside-ul li {
    something;
}

.inside-ul li a {
    something;
}

к этому:

#nav ul.inside-ul {
    something;
}

#nav ul.inside-ul li {
    something;
}

#nav ul.inside-ul li a {
    something;
}

Более конкретные правила (в этом случае правила, которые применяются к идентификатору (#nav), имеют приоритет над более простыми правилами.

Answer 2

Изменение

#nav ul {
    something;
}

до

#nav > ul {
    something;
}

Таким образом, CSS применяется только к дочернему UL #nav, а не к подчиненному UL.

Answer 3

Это CSS-специфичность проблема.

Идентификаторы имеют значение 100, в то время как классы имеют значение 10, а каждое имя элемента имеет значение 1.

Итак #nav ul = 101 в то время как .inside_ul = 10

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

Таким образом, стили #nav ul будут иметь приоритет. Вам нужно будет использовать

#nav ul.inside_ul

имеет специфичность 111.

Answer 4

Вы убедились, что самые важные из них будут последними? .inside-ul должен следовать за #nav ul в файле CSS.