Question

父元素样式

.container {
margin: 20px;
border:1px solid #f1f1f1;
font-size:14px;
font-weight:normal;

子元素样式

.container{}

但是，子元素样式的呈现方式如下：

为什么有两个＆＃39; data-v-***＆＃39;在子元素中并使用父容器样式？

Answer 1

有两个data-v属性，因为您在子组件样式中指定了CSS选择器。它空的事实并没有改变这一点。只要您不将两个组件放在一起，就可以了。风格，它们当然会相互影响，特别是如果你选择相同的类名。

Answer 2

我知道已经有很多年了，但是我将在这里添加一些东西来帮助将来的人们。

我遇到了同样的事情。基本上，我将组件嵌套在组件中，并且都喜欢scoped，以便每个组件都有一个名为.container的类……当渲染样式开始发生冲突时，我感到很惊讶。我以为scoped是要解决此问题...

但显然是设计使然，并非如此：

this post

在范围内，父组件的样式不会泄漏到子组件中。但是，子组件的根节点将同时受父组件的作用域CSS和子组件的作用域CSS的影响。这是设计使然，以便父级可以为子级根元素设置样式以进行布局。

例如，我嵌套了两个组件，最后得到的是：

https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles

我有两个部分加载视图：

<template>
  <div>
    <login-splash />
    <login-form />
  </div>
</template>

其中包括两个：

<template>
  <div class="container">
    <div>
      <h1 class="big">Title</h1>
      <h2 class="small">Subtitle</h2>
    </div>
  </div>
</template>

<template>
  <div class="container">
    <form class="form">
      <label class="label">Username
        <input class="input" type="input" name="username">
      </label>
      <label class="label">Password
        <input class="input" type="password" name="password">
      </label>
      <a href="" class="link">Forgot Password</a>
    </form>
    <button-submit />
  </div>
</template>

问题出在button-submit上，它看起来像这样：

<template>
  <div class="container">
    <button class="button">Button</button>
  </div>
</template>

每个文件都有scoped SCSS，最终导致上述问题。

这一切都回到了

基本上，解决方案是“使用像bem这样的基于类命名的解决方案” ...这不是任何人在看到并使用scoped并认为这是灵丹妙药时都想听到的...我知道...但是与所有Web开发一样，您必须做自己想做的事。

如果您正在开发一个大型项目，与其他开发人员一起工作，或者有时包括第3方HTML / CSS（例如，来自Auth0），则一致的作用域将确保您的样式仅适用于它们想要的组件。

除了scoped属性之外，使用唯一的类名称还可以帮助确保第3方CSS不适用于您自己的HTML。例如，许多项目使用按钮，btn或图标类名称，因此即使不使用BEM之类的策略，添加特定于应用程序和/或特定于组件的前缀（例如ButtonClose-icon）也可以提供一些保护。

另一种方法是使用CSS模块，如以下答案所述： https://vuejs.org/v2/style-guide/#Component-style-scoping-essential

这最终会产生如下内容： https://stackoverflow.com/a/45900067/1034494

为什么在vue中作用域是没用的，父元素样式仍会影响子元素？

2 个答案: