:first-child 样式未在 Vue 组件中应用

Question

问题：

通常第一个 <User> 应该有 margin-left: 0px 并且应该与其他元素左对齐，但这不起作用，如下面的屏幕截图所示。有人知道如何正确解决这个问题吗？

sidebar.scss代码：

.user {
  margin-left: -8px;

  &:first-child {
    margin-left: 0;
  }
}

Sidebar.vue代码

<template>
  <section class="sidebar">
    <slot></slot>
  </section>
</template>

<script>
  export default {
    name: "Sidebar"
  }
</script>

<style scoped lang="scss">
  @import 'sidebar';
</style>

Profile.vue代码

<template>
  <main>
    <Sidebar>
      <Header text="Members" :button="{text: 'Edit'}" hasBorder="true"></Header>
      <User img="..."></User>
      <User img="..."></User>
      <User img="..."></User>
      <User img="..."></User>
      <Button color="grey" isRounded="true" isIconOnly="true"></Button>
    </Sidebar>
  </main>
</template>

User.vue代码：

<template>
  <div class="user">
    <img v-if="this.img" :src="this.img" :alt="this.name">
    <div v-if="!this.img"></div>
    <h6 v-if="this.name">{{this.name}}</h6>
    <slot></slot>
  </div>
</template>

Answer 1

使用::v-deep改变scopedcss.

我已经回答了这个问题，但我有一个旧的且更具描述性的答案可用，这可能有助于您理解用法

https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

注意：不要使用 /deep/ 因为它已被弃用，而且 >>> 组合器也不会工作，因为您正在使用 sass 预处理器

::v-deep {
  .user {
    margin-left: -8px;

    &:first-child {
     margin-left: 0;
   }
  }

}

Answer 2

Scoped 样式不在父组件和子组件之间共享。您有多种选择：

通过从父级样式部分中删除范围属性使样式成为全局样式。
将样式导入目标组件（用户）。
在作用域样式中使用深度组合器。

>>>.用户{ ... }

或

/deep/ .user {
  ...
}

或

::v-deep .user {
  ...
}

Answer 3

不太确定这是否就是这里的问题，但请注意 :first-child 不会仅通过 class 名称来选择第一次出现，而是通过父元素中的标记来选择。换句话说：您不能使用 class 名称来应用 :first-child。相反，使用更语义化的东西，比如

<ul class="users">
  <li class="user"></li> <!-- there is your component -->
  <li class="user"></li>
  <li class="user"></li>
</ul>

:first-child 样式未在 Vue 组件中应用

:first-child styles not beeing applied in Vue Component

css

scope

sass

vue.js