Question

我有一个特定字体颜色的类，另一个用于边框颜色的类。当我为两者分配一个元素时，字体颜色类接管字体和边框。

html {
  background: #fff;
}
.border-gold {
  border-color: #f4cc55;
}
.color-red {
  color: #FF0000;
}
.midquote {
        display: block;
        margin: 1em;
        padding: 0.6em;
        text-align: center;
        border-top: 0.12em dashed; 
        border-bottom: 0.2em solid;
    }
    .midquote .icon {
        display: block;
        margin-top: -1.4em; 
    }
    .midquote i {
        background: #fff;
        padding: 0 0.6em 0 0.6em;
    }

    .quoting {
        display: block;
    }

HTML：

<div class="midquote color-red border-gold">

   <span class="icon"><i class="fa fa-quote-left"></i></span>
   This is an amazing quote from someone.
   <span class="quoting">Jon Doe</span>
</div>

Answer 1

您可以像border-gold或.midquote.border-gold

那样增加div.border-gold个specificity选择器

什么是特异性？

如果两个选择器适用于同一个元素，则具有更高特异性的元素将获胜

html {
  background: #fff;
}
.midquote.border-gold {
  border-color: #f4cc55;
}
.color-red {
  color: #FF0000;
}
.midquote {
  display: block;
  margin: 1em;
  padding: 0.6em;
  text-align: center;
  border-top: 0.12em dashed;
  border-bottom: 0.2em solid;
}
.midquote .icon {
  display: block;
  margin-top: -1.4em;
}
.midquote i {
  background: #fff;
  padding: 0 0.6em 0 0.6em;
}
.quoting {
  display: block;
}

<div class="midquote color-red border-gold">

  <span class="icon"><i class="fa fa-quote-left"></i></span> This is an amazing quote from someone.
  <span class="quoting">Jon Doe</span>
</div>

Answer 2

.midquote选择器中的边框速记规则将覆盖您使用.border-gold设置的样式。最简单的解决方案是在.border-gold规则之后移动.midquote，或者提高.border-gold规则的特异性（例如div.border-gold）。

jsFiddle example （已移动的规则）

jsFiddle example （提高特异性）

Answer 3

由于您在.midquote规则中指定边框的方式，这种情况正在发生：

border-top: 0.12em dashed; 
border-bottom: 0.2em solid;

这些将border-color规则从您的.border-gold规则重置为currentColor，后者引用color属性。 This is expected behavior.

您可以通过using the longhands instead of the shorthands：

解决此问题

.midquote {
    display: block;
    margin: 1em;
    padding: 0.6em;
    text-align: center;
    border-top-width: 0.12em;
    border-top-style: dashed;
    border-bottom-width: 0.2em;
    border-bottom-style: solid;
}

或者您可以重新排列规则，以便.midquote出现在所有其他规则之前（可能是您的意图）。

Answer 4

如果我理解正确，你需要为 .border-gold 添加！important ，如下所示：

clause
  : StringLiteral EOF
  ;

StringLiteral :   '\'' ( Escape | ~('\'' | '\\' | '\n' | '\r') ) + '\'';

fragment Escape : '\\' ( '\'' | '\\' );

字体颜色干扰边框颜色（jsfiddle）

4 个答案: