HTML元素样式不适用于范围样式

Question

由于某种原因，在使用范围时，我的元素样式不起作用。在检查元素时，使用范围时不应用样式。我需要使用范围，因为我不想将样式仅应用于此组件中。我正在使用nuxt.js，不知道这是否与问题有关。

不起作用：

<style scoped>

    a {
        color: red !important;
        text-decoration: underline !important;
    }

</style>

工作：

<style>

    a {
        color: red !important;
        text-decoration: underline !important;
    }

</style>

有什么想法吗？

Answer 1

如the relevant documentation中所述，作用域CSS将data-属性应用于提供的CSS中的所有选择器，因此它仅应用于组件的元素，而不应用于组件的外部，也不适用于嵌套的子对象-组件。

例如，带有此标记：

<app>
  <a>outside link</a>
  <Parent>
    <a>parent link</a>
    <Child>
      <a>child link</a>
    </Child>
  </Parent>
</app>

scoped的{​​{1}} CSS只会影响父链接，不会影响外部链接 也 子链接。

根据您的描述，您正在尝试为子组件链接设置样式。

---

要使作用域内的CSS选择器产生深远的影响（也适用于子组件），您必须使用深<Parent>组合器：

>>>

要查看实际效果，请考虑使用this example。