html - sass中的冒号，不确定如何在HTML中引用

Question

下面的代码没有应用 CSS 规则clearfix: after我从未使用过中间有冒号的 CSS 规则，所以我不知道为什么它不起作用，任何帮助。

我的 SCSS 文件中有以下代码

.clearfix { zoom: 1;}
.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after { clear: both; }

以下是我的html：

<div id="sidebar1" class="sidebar fourcol first clearfix:after" role="complementary">

  <?php if ( is_active_sidebar( 'sidebar1' ) ) : ?>

    <?php dynamic_sidebar( 'sidebar1' ); ?>

  <?php else : ?>

    <!-- This content shows up if there are no widgets defined in the backend. -->

    <div class="alert help">
      <p><?php _e("Please activate some Widgets.", "bonestheme");  ?></p>
    </div>

  <?php endif; ?>

</div>

Answer 1

:after从 HTML 中的 class 属性中删除：

<div id="sidebar1" class="sidebar fourcol first clearfix" role="complementary">

---

PS你的 SCSS 没问题，但这里有一个更方便的方法来完成同样的事情：

.clearfix {
    zoom: 1;

    &:before, &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}