代码之家 › 专栏 › 技术社区 › Robert Claypool

CSS继承:重写作为子代选择器的父选择器

css-selectors inheritance css

Robert Claypool · 技术社区 · 15 年前

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

<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 回复 | 直到 13 年前

AxelEckenberger 15 年前

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

Scott Cranfill 15 年前

这是由于CSS的特殊性。额外的 a 之后 .parent 使其更具体 亲本 相应地,比刚才更具体 .child . Obalix的建议为选择器提供了相同的特性,既有一个基本的HTML元素,也有一个类名称。当专一性相等时,它将应用层次结构中指定的最深值,正如您所期望的那样。

本文(以及链接到的资源)很好地解释了CSS的特殊性: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Giedrius 13 年前

为将来的探索 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 这就是父元素重写子元素样式的原因。

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

3 月前

Mass · 如何在Tailwind CSS v4中创建配置

3 月前

magenta placenta · 将css变量合并为一个变量

3 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

4 月前

Luckkks · 过渡色工作不正常

4 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

4 月前