Question

我有这个样式类，它在视图中创建红色矩形：

.tag-template .left-panel { 
  width: 24px;
    height: 24px;
   background: red;
   vertical-align: middle;

}

这里我如何在视图模板中使用该类：

<script type="text/ng-template" id="tag-template">
  <div class="tag-template">
    <div class="left-panel">          
    </div>
    <div class="right-panel">
      <span>{{$getDisplayText()}}</span>
      <a class="remove-button" ng-click="$removeTag()">&#10006;</a>
    </div>
  </div>
</script>

在某些时候，我想覆盖css .tag-template .left-panel中定义的颜色，并将颜色更改为绿色。

任何想法如何使用ng-style为视图更改视图中css中定义的颜色？

Answer 1

你可以使用ng-style来改变颜色，就像myStyle可以是你的表达

  <div class="left-panel" ng-style="myStyle"></div>

或

<div class="left-panel" ng-style="{color:'green'}"></div>

Answer 2

我建议您在CSS中保留标记和样式中的逻辑，这样可以使代码更易于阅读和维护。

注意，/ id / number / idobject / / 7 / 90 / 3 /

之间没有空格

CSS

.left-panel.left-panel-color

HTML

.tag-template .left-panel.left-panel-color { 
   color: green;    
}

Answer 3

如果要通过纯css方法覆盖：旧代码：

<div class="left-panel">

新代码：

<div class="left-panel" style="color:green";>

如何覆盖css中定义的颜色？

3 个答案: