Angular ng-class不会影响其他样式

Question

我正在使用一些ng-class来检查表单验证并添加新的样式，问题是当我使用ng-class innee添加类时，样式不起作用，但在添加该类样式时在控制台中应用

这是我的代码

<div class="section colm colm6">
    <label for="firstname" class="field prepend-icon" ng-class="{'state-error':goedlevenForm.firstname.$dirty && goedlevenForm.firstname.$invalid}">
       <input type="text" name="firstname" class="gui-input" placeholder="Uw naam..." required>
       <span class="field-icon"><i class="fa fa-user"></i></span>
    </label>
    <em class="state-error" ng-show="goedlevenForm.firstname.$dirty && goedlevenForm.firstname.$invalid">Vul uw naam in</em>
</div>
<!-- end section --> 

CSS

------------------------------------- */
.goedleven .state-error .gui-input,
.goedleven .state-error .gui-textarea,
.goedleven .state-error.select > select,
.goedleven .state-error.select-multiple > select,
.goedleven .state-error input:hover + .checkbox,
.goedleven .state-error input:hover + .radio,
.goedleven .state-error input:focus + .checkbox,
.goedleven .state-error input:focus + .radio,
.goedleven .state-error .checkbox,
.goedleven .state-error .radio {
    background: #FEEFE9;
    border-color: #E46B66;
}

    .goedleven .state-error .field-icon i,
    .goedleven .state-error .gui-textarea ~ .field-icon i {
        color: #e74c3c;
    }

.goedleven .state-error.select .arrow {
    color: #e74c3c;
}

.goedleven .state-error.select:before {
    border-left: 1px solid #E46B66;
}

.goedleven .state-error .gui-input ~ .input-hint,
.goedleven .state-error.file .gui-file:hover + .gui-input,
.goedleven .state-error .gui-textarea ~ .input-hint {
    border-color: #E46B66;
}

.goedleven em.state-error{
    display: block !important;
    margin-top: 6px;
    padding: 0 3px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    line-height: normal;
    color: #CC0000;
    font-size: 0.85em;
}