HTML 元素样式在作用域样式中不起作用

Question

For some reason my element styling isn't working when using scoped. When inspecting the element the styling is not applied when using scoped. I need to use scoped because I want the styling only be applied within this component. I'm using nuxt.js, no idea if this has anything to do with the problem.

Not working:

<style scoped>

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

</style>

Working:

<style>

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

</style>

Any ideas?

Answer 1

As explained in the relevant documentation , scoped CSS applies a data- attribute to all selectors in the provided CSS so that it only applies to the elements of the component, not outside of it, nor to nested sub-components.

For example, with this markup:

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

scoped CSS of <Parent> will only affect parent link and will not affect the outside link nor the child link.

From what you're describing, you are trying to style a sub-component link.

---

To make your scoped CSS selectors affect deeply (apply to sub-components as well) you have to use the deep >>> combinator:

<style scoped>
  * >>> a {
    color: red;
    text-decoration: underline;
  }
</style>

To see it in action, consider this example .