时间戳

首页 > 解决方案 > 从浏览器检查元素时，在 html 中具有类“v-toolbar__content”的未知 div

vue.js - 从浏览器检查元素时，在 html 中具有类“v-toolbar__content”的未知 div

问题描述

我试图用类似这样的代码更新其中一个组件（标题）的样式

<template>
 <v-app-bar>
  <v-avatar>
   <v-img />
  </v-avatar>
  <p></p>
  <v-spacer />
  <v-btn></v-btn>
  <v-btn></v-btn>
 </v-app-bar>
<v/template>

当我在浏览器中检查元素时。v-toolbar__content 类的 div。突然出现了。如何访问此 v-toolbar__content 以便更改其 CSS？

v-toolbar__content 显示在 <v-app-bar 之后。它将头像包裹到 btn

编辑：这是您在浏览器中检查时显示的内容

<v-app-bar>
 <div .v-toolbar__content>
   <v-avatar>
    <v-img />
   </v-avatar>
   <p></p>
   <v-spacer />
   <v-btn></v-btn>
   <v-btn></v-btn>
  </v-app-bar>
 </div>
</v-app-bar>

标签： vue.jsvuejs2vuetify.js

解决方案

我猜当你试图操纵这个.v-toolbar__content类时，你使用的是作用域样式？

如果是这种情况，操作您的类的一种方法是使用深度选择器来操作您的子组件（请参阅文档）

以下语法应该有效。

<style scoped>
   >>> .v-toolbar__content {
      /* ... */
   }
</style>

（如果您使用的是 Sass ，请替换>>>为）::v-deep

推荐阅读