CSS, сохраняющий родительские правила вместо класса - PullRequest
Новая
       41

CSS, сохраняющий родительские правила вместо класса

2 голосов
/ 03 декабря 2010

в этой ситуации: 

<ul id="menu_pages">
                      <li class="menu_pages_title">
                        <div id="menu_pages_container">
                            <a href="#">AAA</a>
                            <div class="page_content">

                            <div class="page_content_actions">
                                    <a class="edit" href="#">BBB</a>
                            </div>
                                test 1
                            </div>
                        </div>
                    </li>

</ul>

ul#menu_pages li{
    margin-bottom: 10px;
}

    ul#menu_pages li a:link,ul#menu_pages li a:active,ul#menu_pages li a:visited{
        display:block;
        padding:5px;
        border:1px solid #C3D5DF;
        line-height:25px;
        font-size: 15px;
        font-weight: bold;
        color:#C3D5DF;

}

div.page_content_actions li a.edit:link, div.page_content_actions a.edit:active, div.page_content_actions a.edit:visited {
                    background: url('/site_images/page_edit.png') left no-repeat;
                    display:block;
                    padding:0;
                    border:0;
                    font-size: 11px;
                    font-weight: bold;
                    color:#fff;

                }

класс .edit должен получить свой собственный набор правил (внутри .page_content_actions), но вместо этого .edit просто получает фон, остальное исходит от общих #menu_pages li a. Почему это так?

Ответы [ 4 ]

3 голосов
/ 03 декабря 2010

вы можете использовать !important для предотвращения переопределения стилей

Пример: 

<p class="foo bar">hello</p>
<style>
.foo
{
   font-size:20px;
}
.bar
{
   font-size: 5px !important;
}
</style>

в приведенном выше примере будет применена версия important.

3 голосов
/ 03 декабря 2010

CSS пытается выбрать наиболее конкретное определение элемента

например,

1 

div span {
    background: yellow
}

2. 

div div span {
    background: red
}

(2) имеет приоритет, поскольку он более конкретен

2 голосов
/ 03 декабря 2010

CSS следует правилам специфичности, что означает, что если у вас есть два класса, которые могут применяться оба, они взвешиваются и применяется более конкретный.См. Эту превосходную статью для более подробного объяснения:

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

В вашем случае, #menu_pages li a имеет специфичность 102 (100 для селектора идентификаторов и 1 + 1 для2 селектора html-элемента), а a.edit имеет специфичность всего 11 (10 для селектора класса и 1 для селектора html).Либо уменьшите специфичность первого, либо увеличьте специфичность второго для достижения желаемого эффекта.

Кроме того, вы можете использовать !important в конце любого правила, которое вы хотите переопределить другим правилом с более высокой специфичностью.,Обратите внимание, что это должно применяться к каждому стилю индивидуально.

1 голос
/ 03 декабря 2010

Поскольку более конкретный или более длинный селектор (#menu_pages li a) переопределяет простой .edit.

...