为什么我的属性选择器不起作用？

Question

我正在尝试使用多个属性选择器，但是我的代码似乎至少在CodePen中不起作用...

我在Google上搜索了很多，但找不到解决方法。

SCSS：

*[class^="inset"] {
  &[class*="-t0"] {
    top: 0;
  }
  &[class*="-r0"] {
    right: 0;
  }
  &[class*="-b0"] {
    bottom: 0;
  }
  &[class*="-l0"] {
    left: 0;
  }
}

CSS：

*[class^="inset"][class*="-t0"] {
  top: 0;
}
*[class^="inset"][class*="-r0"] {
  right: 0;
}
*[class^="inset"][class*="-b0"] {
  bottom: 0;
}
*[class^="inset"][class*="-l0"] {
  left: 0;
}

这是我的HTML：

<button class="inset-t0">Button</button>

Answer 1

这样选择意味着元素中有两个css类，例如

<button class="inset -t0"></button>

您可以简单地执行以下操作：

.inset {
  &-t0 {
    top: 0;
  }
  &-r0 {
    right: 0;
  }
  &-b0 {
    bottom: 0;
  }
  &-l0 {
    left: 0;
  }
}

Answer 2

   .inset {
        &-t0 {
            top: 0;
        }

        &-r0 {
            right: 0;
        }

        &-b0 {
            bottom: 0;
        }

        &-l0 {
            left: 0;
        }
    }