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，这样我也可以定位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？

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

不要打扰＆＃34;以＆＃34;开头，您可以轻松使用＆＃34;包含＆＃34; [class*="fa-chevron"]

Answer 3

我发现：

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

修好了。

我不太清楚为什么第一个版本不起作用......

有一个使用SCSS / CSS定位HTML元素的问题

3 个答案: