Nuxt.js页面scoped CSS不生效，如何设置首页页脚固定在底部

• TheFooter组件渲染在全局布局default.vue中，和<Nuxt />组件（页面组件的渲染插槽）是同级DOM关系，不属于pages/home.vue的组件DOM树范围
• scoped样式的作用域仅限当前页面组件内部的DOM元素，哪怕使用深度选择器也只能穿透作用于当前组件内部引入的子组件元素，无法作用于组件外部的DOM节点，所以你写的样式完全匹配不到页脚元素。

方案1：通过布局动态传参控制页脚样式（最符合组件化规范） #

1. 给TheFooter组件添加控制固定定位的props，动态绑定样式类：

<!-- components/TheFooter.vue -->
<template>
  <footer 
    id="footer" 
    class="lg:text-2xl mt-10"
    :class="{ 'fixed-footer': fixed }"
  >
    <!-- 原有内容省略 -->
  </footer>
</template>
<script>
export default {
  props: {
    fixed: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style scoped>
.fixed-footer {
  position: fixed;
  padding: 0;
  bottom: 0;
  width: 100%;
}
</style>

2. 在全局布局中判断当前路由是否为首页，给TheFooter传对应参数：

<!-- layouts/default.vue -->
<template>
  <div>
    <TheNavbar />
    <Nuxt />
    <TheFooter :fixed="isHomePage" />
  </div>
</template>
<script>
export default {
  computed: {
    isHomePage() {
      // 可根据你的实际路由配置调整判断条件
      return this.$route.path === '/' || this.$route.name === 'home'
    }
  }
}
</script>

方案2：首页添加非scoped样式块（快速实现） #

在pages/home.vue中新增一个无scoped属性的style块，使用精准匹配规则避免样式污染：

<!-- pages/home.vue -->
<template>
  <!-- 给首页根元素加专属类名 -->
  <div class="home-page-root">
    <!-- 原有首页内容 -->
  </div>
</template>
<!-- 原有scoped样式保留 -->
<style lang="css" scoped>
/* 原有样式 */
</style>
<!-- 新增非scoped样式，使用:has选择器精准匹配首页下的页脚 -->
<style>
body:has(.home-page-root) #footer {
  position: fixed;
  padding: 0;
  bottom: 0;
  width: 100%;
}
</style>

注：该方案依赖浏览器对CSS :has() 选择器的支持，目前Chrome 105+、Firefox 121+、Safari 15.4+均已支持，适配主流用户群体无压力。

内容的提问来源于stack exchange，提问作者citizenlab