【问题标题】:How to override the properties of a CSS class using another CSS class如何使用另一个 CSS 类覆盖 CSS 类的属性
【发布时间】:2014-01-24 03:17:34
【问题描述】:

我对 CSS3 还很陌生,我希望能够做到以下几点:

当我将一个类添加到一个元素中时,它会覆盖该特定元素中使用的另一个类的属性。

假设我有

<a class="left carousel-control" href="#carousel" data-slide="prev">

我希望能够添加一个名为bakground-none 的类,它将覆盖left 类中的默认背景。

谢谢!

【问题讨论】:

    标签: css class overriding


    【解决方案1】:

    有多种方式可以覆盖属性。假设你有

    .left { background: blue }
    

    例如以下任何一项都会覆盖它:

    a.background-none { background: none; }
    body .background-none { background: none; }
    .background-none { background: none !important; }
    

    前两个通过选择器特异性“获胜”;第三个赢了!important,钝器。

    您还可以组织样式表,例如规则

    .background-none { background: none; }
    

    仅凭顺序获胜,即其他方面同样“强大”的规则。但这会施加一些限制,并且要求您在重新组织样式表时要小心。

    这些都是CSS Cascade 的示例,这是一个重要但被广泛误解的概念。它定义了解决样式表规则之间冲突的确切规则。

    附:我在问题中使用了leftbackground-none。它们是不应该使用的类名示例,因为它们反映了特定的渲染而不是结构或语义角色。

    【讨论】:

    • 你写的它们是不应该使用的类名的例子,因为它们反映了特定的渲染而不是结构或语义角色。你能详细说明一下吗?为什么要避免使用leftbackground-none
    • @Socrates:有些人认为 css 类应该只指定名称来标识它所应用的元素是什么或做什么(例如buttonname-label 等)。其他人认为如果您使用这种方法,CSS 将变得难以管理,您应该使用“实用程序优先”或“功能性”css,其中类对应于属性值(例如margin-top-4width-10 等)。从历史上看,“语义”方法一直占主导地位,而最近“功能”方法已获得追随者。在一个中等规模的项目上尝试两者,然后自己决定哪个更好。
    • 不知道!重要,谢谢
    【解决方案2】:

    只需使用!important 将有助于覆盖

    background:none !important;
    

    虽然据说这是一种不好的做法,!important 对实用程序类很有用,你只需要负责任地使用它,检查一下:When Using important is the right choice

    【讨论】:

    • !important 是一种不好的做法。很快,所有代码都变得 !important 了。
    • !在某些编程语言中是“不”符号,所以它变成了“不重要”的语义:)
    【解决方案3】:

    您应该通过增加样式的特异性来覆盖。有不同的方法来增加特异性。使用影响特异性的!important 是一种不好的做法,因为它会破坏样式表中的自然级联。

    下图取自css-tricks.com 将帮助您根据点结构为您的元素生成正确的特异性。无论哪个特异性得分更高,都会获胜。听起来像是一场游戏 - 不是吗?

    css-tricks.com 上查看示例计算。这将帮助您很好地理解这个概念,并且只需要 2 分钟。

    如果您想自己制作和/或比较不同的特性,请试试这个特性计算器:https://specificity.keegan.st/,或者您可以只使用传统的纸/铅笔。

    如需进一步阅读,请尝试MDN Web Docs

    最好不要使用!important

    【讨论】:

      【解决方案4】:

      作为important 关键字的替代方案,您可以使选择器更具体, 例如:

      .left.background-none { background:none; }
      

      (注意:类名之间没有空格)。

      在这种情况下,当 .left.background-none 都列在类属性中时(无论顺序或接近度如何),该规则将适用。

      【讨论】:

        【解决方案5】:

        如果您在其他类之后列出 bakground-none 类,则其属性将覆盖已设置的属性。此处无需使用!important

        例如:

        .red { background-color: red; }
        .background-none { background: none; }
        

        <a class="red background-none" href="#carousel">...</a>
        

        链接不会有红色背景。请注意,这只会覆盖选择器不太具体或同样具体的属性。

        【讨论】:

        • 感谢您的回复!我尝试将此作为第一个解决方案,但由于某种原因它不起作用!
        • 如果样式以 .form-horizo​​ntal .form-group{margin-left:-15px} 等特定方式定义,则这种覆盖 css 类的方式将不起作用。在这里你必须使用 !important
        • 将 !important 添加到 .background-none { background: none !importatn; } 这很好用
        【解决方案6】:

        LIFO 是浏览器解析 CSS 属性的方式。如果您使用 Sass,请声明一个名为

        的变量

        "$header-background: 红色;"

        使用它而不是直接分配像红色或蓝色这样的值。 当您想要覆盖时,只需将值重新分配给

        "$header-background:蓝色"

        然后

        背景颜色:$header-background;

        它应该顺利覆盖。使用“!important”并不总是正确的选择。它只是一个修补程序

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2014-10-17
          • 2013-01-29
          • 2013-12-16
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多