css - 为什么我不能将伪类元素的颜色设置为红色？

Question

这是我的测试代码:http://jsfiddle.net/kongakong/n41zm2s7/4/

HTML:

<div class='test'>
    <div class="icon icon-test">Testing</div>
</div>

减少:

.icon-test {
    font-family: 'Open Sans';
    speak: None;
}

.icon-test:before {
        content:"-";
}

.test {
    .icon {
        color:red;
    } 

}

编译成

.icon-test {
  font-family: 'Open Sans';
  speak: None;
}
.icon-test:before {
  content: "-";
}
.test .icon {
  color: red;
}

我希望将字符“-”的颜色更改为红色。这些代码有什么问题？

Answer 1

首先，您在 CSS 面板中的内容无效。接下来，如果您只想更改伪元素的颜色，则将 color 属性添加到 .icon-test:before 规则中。

.icon-test {
  font-family: 'Open Sans';
  speak: None;
}
.icon-test:before {
  content: "-";
  color: red;
}

<div class='test'>
  <div class="icon icon-test">Testing</div>
</div>