Наследование CSS: переопределение родительского селектора, который является селектором потомка - PullRequest
Новая
       10

Наследование CSS: переопределение родительского селектора, который является селектором потомка

7 голосов
/ 27 февраля 2010

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

<html>
    <head>
        <style>
            .parent a { color:Red; }
            .child { color:Blue; }
        </style>
    </head>
    <body>
        <div class="parent">
            <a class="child" href="http://www.stackoverflow.com">
                stackoverflow
            </a>
        </div>
    </body>
</html>

Меня удивляет, что родитель в этом случае переопределяет ребенка!

Ответы [ 3 ]

9 голосов
/ 27 февраля 2010

Используйте a.child в качестве селектора. 

<html>
    <head>
        <style>
            .parent a { color:Red; }
            a.child { color:Blue; }
        </style>
    </head>
    <body>
        <div class="parent">
            <a class="child" href="http://www.stackoverflow.com">
                stackoverflow
            </a>
        </div>
    </body>
</html>
8 голосов
/ 27 февраля 2010

Это связано со спецификой CSS. Дополнительные a после .parent делают его более конкретным, чем просто .parent, и, соответственно, более конкретным, чем просто .child. Предложение Obalix придает селекторам одинаковую специфику, поскольку оба имеют базовый элемент HTML и обозначение класса. Когда специфичность равна, он будет применять самое глубокое значение, указанное в иерархии, как вы ожидали.

Эта статья (и ресурсы, на которые она ссылается) прекрасно справляется со спецификой CSS: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

4 голосов
/ 17 апреля 2012

Для дальнейшего изучения http://css -tricks.com / specics-on-css-специфичность /

в основном вы можете посчитать значение селекторов в этом порядке 

Inline | ID | Class/pseudoclass | Element
1      | 1  | 1                 | 1

, где Inline = 1000, ID = 100, Класс = 10, Элемент = 1

В вашем случае .parent a == 11 и .child == 10, поэтому родительский элемент переопределяет стиль дочернего элемента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...