Question

如何在不更改或删除父选择器的情况下使此链接使用子选择器？（我希望链接为蓝色。）

<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>

令我惊讶的是，在这种情况下，父母会覆盖孩子！

Answer 1

使用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>

Answer 2

这是由于CSS的特异性。 a之后的额外.parent使其更具体而不仅仅是.parent，相应地，更具体而不仅仅是.child。 Obalix的建议为选择器提供了相同的特异性，两者都具有基本HTML元素和类别名称。当特异性相等时，它将应用层次结构中指定的最深值，如您所料。

本文（及其链接的资源）在解释CSS特异性方面做得很好：http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Answer 3

以便日后探索http://css-tricks.com/specifics-on-css-specificity/

基本上你可以按此顺序计算选择器值

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

其中Inline = 1000，ID = 100，Class = 10，Element = 1

在你的情况下 .parent a == 11和.child == 10这就是父母重写子元素样式的原因。

CSS继承：覆盖作为后代选择器的父选择器

3 个答案: