使用SCSS/CSS定位HTML元素时出现问题

style="float:right"

我的HTML:

<div class="panel-heading">
  <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
    <h4 class="panel-title">
      <i class="fa fa-picture-o" aria-hidden="true"></i>    
        Photography 
      <i class="fa fa-chevron-up" aria-hidden="true"></i>
    </h4>
  </a>
</div>

我想要 <i class="fa fa-chevron-up" aria-hidden="true"></i> 通过以开头的类为目标向右浮动 fa-chevron fa-chevron-down .

.panel-heading {
    padding: $panel-heading-padding;
    border-bottom: 1px solid transparent;
    //@include border-top-radius(($panel-border-radius - 1));
    color: #000;

    > .dropdown .dropdown-toggle {
        color: inherit;
    }

.fa {
    margin-right: 10px;
    color: $mogoturquoise;
}

a {
    h4 {
        color: #000;

          //Doesn't work
          i[class^="fa-chevron"] {
            float: right;
          }

          //Works
          .fa-chevron-up{
            float:right;
          }
        }
    }
}

为什么我的属性选择器不工作?这是SCS吗?