SCSS/CSSを使用してHTML要素をターゲット設定する際に問題が発生しました

Question

現在、右に浮かぶアイコンを取得しようとしています。これは簡単にstyle="float:right"を追加するかIDを追加することで簡単に行えますが、私が持っているコードの中で特にアイコンをターゲットにしています。

マイ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-downをターゲットにすることができfa-chevronで始まるクラスを標的とすることにより、右フロートします。ここで

は私SCSSです：

.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; 
      } 
     } 
    } 
} 

私の属性セレクタの作業は、このSCSSであるされていないのはなぜ？

Answer 1

[class^="fa-chevron"]はsubstring matching attribute selectorです。

クラスをターゲットにしていません。属性を対象としています。

クラスの属性は次のようになりますclass="fa fa-chevron-up"：fa-chevronで始まらず、fa fa-chevronで始まります。

あなたはこれを解決するために、追加のクラスを追加する必要があります

`class="fa fx-chevron fa-chevron-up"` 

あなたはその後、通常のクラスセレクタとそれをターゲットにすることができます：

.fx-chevron { 

別の方法としては、別のサブストリング属性セレクタ、いずれかを使用することができます文字列の先頭に固定されていません。

[class*="fa-chevron"] 

Answer 2

私がことがわかった：

i[class^="fa fa-chevron"] { 
    float: right; 
} 

はそれを修正しました。私は最初のバージョンが動作しない理由は、あまりにもわからないんだけど

...

Answer 3

は "始まる" と気にしないでください、あなたは簡単に使用することができます[class*="fa-chevron"]