Question

如果有特定的类，我想更改字体颜色。

HTML：

    <p class="status">  
      test
      <span class="has-this">test</span> (all turn to red)
    </p>

    <p class="status"> 
      <span>test</span> 
    </p>

SCSS：

.status {
        font-size: 25px;
        color: blue;
        height: 30px;
        line-height: 30px;
        padding-right: 10px;
        .has-this & {
            color: red;
        }
    }

如果里面有'has-this'类，我想将字体颜色更改为红色。是否可以通过仅使用css来实现这一点？（没有js）状态动态地生成一些有 - 有些没有。

这是我的codepen http://codepen.io/anon/pen/ZbGyZm

Answer 1

在Css下面添加：

.status span {
  color: gray;
}

Answer 2

你不需要使用＆amp;角色就这样做：

.status {
    ....
    .has-this {
      ....
    }
}

＆amp; character表示父选择器，并在编译scss时将其呈现为原样，例如：

.status {
   ...
    &:after{
   ...
   }
}

成为：

.status{ ... }
.status:after{ ... }

Answer 3

我已经完成了你能看到的代码...... HTML部分

  <span class="a">test</span> 
  <h1 class="h1">jkcldjf</h1>



  <span class="a">test</span> k

</div>

SCSS部分......

.status {
        font-size: 25px;
        color: blue;
        height: 30px;
        line-height: 30px;
        padding-right: 10px;
        & .a {
            color: green;
        }
       & .h1
         {
           color:green;
         }
    }

Answer 4

编辑你的CSS

.status {
    font-size: 25px;
    color: blue;
    height: 30px;
    line-height: 30px;
    padding-right: 10px;
    .has-this {
        color: red;
    }
}

根据子类更改字体颜色

4 个答案: