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

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>