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

【问题标题】：HTML Element styling not working in scoped styleHTML 元素样式在作用域样式中不起作用
【发布时间】：2019-11-23 04:07:35
【问题描述】：

由于某种原因，我的元素样式在使用 scoped 时不起作用。检查元素时，使用 scoped 时不应用样式。我需要使用作用域，因为我希望样式只应用在这个组件中。我正在使用nuxt.js，不知道这是否与问题有关。

不工作：

<style scoped>

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

</style>

工作：

<style>

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

</style>

有什么想法吗？

【问题讨论】：

【解决方案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<Parent> 的 CSS 只会影响父链接，不会影响外部链接也不子链接。

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

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

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

要查看它的实际效果，请考虑this example。

【讨论】：