存在針對使用SCSS/CSS的HTML元素的問題

我目前正試圖讓圖標浮動到右側。這可以很容易地通過添加style="float:right"或添加一個ID，但我試圖在我的代碼內專門針對圖標。存在針對使用SCSS/CSS的HTML元素的問題

我的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。

這裏是我的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？

來源

2017-08-02 Ginger Squirrel

'我[*類= 「FA-字形」]' – UncaughtTypeError

[class^="fa-chevron"]是substring matching attribute selector。

它不針對類。它針對屬性。

您的班級屬性看起來像這樣class="fa fa-chevron-up"：它不以開頭，它以fa fa-chevron開頭。

您應該添加一個額外的類來解決這個問題：

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

然後，您可以用常規類選擇的目標是：

.fx-chevron {

或者您可以使用一個不同的子屬性選擇，一個這不是錨定到字符串的開頭。

[class*="fa-chevron"]

來源

2017-08-02 14:11:49 Quentin

感謝你的解釋！ –

我發現：

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

固定它。

我也不太知道爲什麼第一個版本不工作...

來源

2017-08-02 14:08:05

不要費心「年初」，就可以輕鬆使用「包含」 [class*="fa-chevron"]

來源

2017-08-02 14:13:37 n1kkou

存在針對使用SCSS/CSS的HTML元素的問題

回答

相關問題