【问题标题】:Why isn't my embedded style taking precedence over styles in my external stylesheet?为什么我的嵌入样式不优先于我的外部样式表中的样式?
【发布时间】:2011-03-22 13:24:05
【问题描述】:

我有以下样式表:

/* 我的样式表.css */ .MyForm .MyInput 字段集 { 边框:2px 纯灰色 }

然后是下面的 HTML 代码:

所有字段集都从外部样式表接收 2px 实心灰色边框。我认为嵌套的字段集将从嵌入样式接收 0 边框,因为选择器“.MyInnerFieldSets 字段集”优先于“.MyForm .MyInput 字段集”。我在 Firefox 3.6.8 中对此进行了测试。这是预期的行为还是 Firefox 的问题?

谢谢

【问题讨论】:

    标签: html css


    【解决方案1】:
    .MyForm .MyInput fieldset { border: 2px solid grey }
    

    此规则指定了 2 个类,因此它比后一个规则更具体。只需在后一个规则前面加上相同的类名,使其更具体或更具体。

    【讨论】:

      【解决方案2】:

      选择器

      .MyForm .MyInput fieldset 
      

      比选择器具有更大的特异性(更具体)

      .MyInnerFieldsets fieldset
      

      一个更具体的选择器会覆盖一个不太具体的选择器。 Read about specificity and how it's calculated here.

      要解决这个问题,请使您的第二个选择器更具体(例如.MyInput .MyInnerFields fieldset),或使第一个选择器不那么具体(.MyInput fieldset)。

      【讨论】:

      • 额外建议:这确实是@thomasrutter 的问题,但在添加额外的选择器之前,我实际上会重新考虑为什么首先需要这样做。因为这样做会让你很快陷入 CSS 特异性问题。为什么你需要这么具体?你能不能说得更具体一点?从长远来看,我建议使用像 BEM(或类似的东西)这样的东西来让你的生活更轻松。 getbem.com/introduction
      • 是的,这是一个很好的观点,你很快就会陷入一场特异性战争——这场战争的下一个升级是!important...它变得丑陋了。在这种情况下,使第一个 less 具体可能是另一种选择,因为也许您希望更一般的规则适用于 .myform 中的 any 字段集,然后想要挑出例外——无论如何,有很多方法可以做到这一点,而 CSS 会迫使您考虑自己的结构
      猜你喜欢
      • 2011-03-10
      • 2015-03-11
      • 2018-01-18
      • 2020-08-14
      • 1970-01-01
      • 2020-03-05
      • 2020-02-18
      • 2021-08-16
      • 1970-01-01
      相关资源
      最近更新 更多