Question

我使用了BEM方法，我的<div>显示的是Block和Modifier中的CSS，而不是Element

即c-banner（块）和--warning（修饰符）的css出现了，但__icon（元素）却没有出现。

我知道出现了修饰符color，因为我尝试将其更改为另一个color，并且它出现在UI上。

例如：当前：

&--warning {
  color: #D9822B
}

编辑：

&--warning {
  color: black
}

更改后，--warning图标将在用户界面上以黑色显示。

但是，padding-right中的__icon从未得到应用。

c-banner {
/* Block CSS Properties */

  &__icon {
    padding-right: 12px;

    &--warning { /* Used for warning purposes */
      color: #D9822B;
    }

    &--primary { /* Used for general information */
      color: #137CBD;
    }

    &--success { /* Used for verified access */
      color: #0F9960;
    }

    &--danger { /* Used as a hard stop */
      color: #DB3737;
    }
  }
}

我为为什么padding-right的{{1}}不被应用而__icon的{{1}}被应用而感到困惑

Answer 1

您所缺少的是： 31,000 .....类名前面的点

此外，为了进行填充，它们必须位于.c-banner内，因为要链接形成完整的选择器，并且没有以--warning结尾的选择器

如果您想影响多个，可以设置__icon的样式：

material-icons

嵌套选择器的CSS不适用于div

1 个答案: