CSS каскадный порядок в одной таблице стилей

Question

Я пытаюсь понять, полностью ли я здесь что-то неправильно понимаю. У меня есть меню и подменю (выпадающий стиль с использованием только CSS, без javascript), и по какой-то причине стили подменю (определенные .submenu li a) всегда отображаются в том же стиле, что и родительский элемент a (определенный #menu li a ), хотя стили CSS подменю отображаются ПОСЛЕ верхних стилей меню.

Я неправильно понимаю правила CSS? Я думал, что функции определены позже и на более низком уровне переопределяют верхний уровень (например, встроенный стиль всегда будет переопределять стили style.css). Я прилагаю скриншот с Firebug, который показывает зачеркивание размеров шрифта, определенных в строке 275, в пользу стилей, определенных в строке 225, для родительских объектов DOM.

Моя DOM выглядит так, чтобы упростить ее:

<ul id="menu">
    <li>
        <a href="http://themes.brixwork.com/westend/about-us">about us</a>
        <ul class="submenu">
            <li>
                <a href="http://themes.brixwork.com/westend/testimonials">Testimonials</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="http://themes.brixwork.com/westend/listings">listings</a>
    </li>
    <li>
        <a href="http://themes.brixwork.com/westend/mls-search">MLS&reg; Search</a>
    </li>
    <li>
        <a href="http://themes.brixwork.com/westend/city-guide">City Guide</a>
        <ul class="submenu">
            <li>
                <a href="http://themes.brixwork.com/westend/city-guide/7/the-west-end-vancouver">The West End</a>
            </li>
            <li>
                <a href="http://themes.brixwork.com/westend/city-guide/8/coal-harbour">Coal Harbour</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="http://themes.brixwork.com/westend/blog">blog</a>
    </li>
</ul>

И мой CSS выглядит следующим образом.

#menu li a:link, #menu li a:visited {
    color:#333;
    text-decoration:none;
    font-size:16px;
    font-weight: bold;
    padding-bottom: 3px;
    text-transform: uppercase;
}

#menu li a:hover {
    color:#333;
    background-image: url('../images/pink_dots.png');
    background-position: bottom left;
    background-repeat: repeat-x;
}

#menu li a:active {
    position:relative;
    color:#333;
}

.submenu {
    position:absolute;
    left: -9999px;
    display: block;
    background-color: #DD2D77;
    padding:0px 0px 0px 0px;
    margin: 0px;
    top:16px;
    z-index: 20;
}

#menu li:hover .submenu {
    left: -5px;
}

.submenu li {
    text-align: left !important;
    margin:0px !important;
    padding: 2px 0px 3px 0px !important;
    position:relative;
    display: block;
    width: auto;
    float: none;
    text-align: left;
}

.submenu li:hover {
}

.submenu li a:link, .submenu li a:visited {
    color:#fff;
    text-align: left;
    font-size:12px;
    font-weight: normal;
    margin: 0px;
    white-space:nowrap;
    display: block;
    padding:3px 7px 5px 7px !important;
    min-width: auto;
    zoom: normal;

}

.submenu li a:hover, .submenu li a:active {
    color:#fff !important;
    background-image: none !important;
    background-color: #73AA12;
}

Answer 1

Да; вы неправильно понимаете, как работает CSS.

http://www.htmldog.com/guides/cssadvanced/specificity/

Порядок, в котором вы определяете правила в файле CSS, ничего не значит. Селектор определяет, какие правила применяются и когда.

Аксиома CSS заключается в том, что чем более специфичны ваши селекторы, тем больше их приоритет над менее специфичными.

Вот как, например, работают стили привязки. Чтобы показать подчеркивание только при наведении курсора:

a:hover
{
  text-decoration: underline;
}

a
{
  text-decoration: none;
}

Несмотря на то, что менее конкретное правило будет определено позже, более конкретное правило (тег привязки, также являющийся мышью) отменяет более общее правило.

Answer 2

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

Ваш первый стиль #main li a используетID в качестве контекста, тогда как второй стиль .submenu li a использует CLASS в качестве контекста.Идентификатор содержит больше специфичности , чем класс, поэтому он переопределяет .submenu.

. Вам нужно немного ознакомиться со спецификой CSS:

• http://www.htmldog.com/guides/cssadvanced/specificity/
• http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
• http://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/
• http://css -tricks.com / specics-on-css-специфичность /

Вы можете сделать быстрое исправление и объявить #main > li a - это будет применяться только к якорям внутри элементов списка, которые являются прямыми потомками элемента #main.Затем ваше правило .submenu li a будет применено к элементам вашего подменю.

Answer 3

Селектор id имеет больше специфичности , чем ваш другой селектор.

Увеличьте специфичность, которая предпочтительнее !important.

Answer 4

Вот калькулятор специфичности, который вы можете добавить в закладки в своем браузере: http://www.westciv.com/mri/

Когда вы щелкнете по нему, откроется окно, в которое вы можете либо ввести селектор, либо вы можете щелкнуть элемент на странице, и он предложит выбрать селектор, который вы должны использовать (показывая вам путь, который требуется, чтобы получить есть).

Может помочь в качестве инструмента обучения.