1つ：未分類

1. 1つのコンポーネントまたはページに複数のスタイルを設定し、ローカルスタイルとグローバルスタイルを混在させることができます

コンポーネントでスコープ付きスタイルとスコープなしスタイルの両方を使用して、複雑な要件を実現できます。

<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>

Vueの公式ドキュメントでスコープ付きスコープ付きCSSを紹介
| Vueローダーhttps://vue-loader.vuejs.org/zh/guide/scoped-css.html

ときに<style>ラベルがスコープの属性があり、そのCSSは、現在のアセンブリの構成要素に作用します。これは、ShadowDOMでのスタイルのカプセル化に似ています。

スコープの範囲に注意してください、重みの問題のため、スコープが子コンポーネントで使用されている場合、子コンポーネントのスタイルを親コンポーネントで直接変更することはできません。親コンポーネントでVueディープアクションセレクターを使用する必要があります。

.parent >>> .children{
    
     /* ... */ }

.parent /deep/ .children{
    
     /* ... */ }

動的に生成されたコンテンツ
v-htmlDOMコンテンツの作成に影響を与えることにより、スコープスタイルは作成されませんが、それらの深層動作セレクターによってスタイルを設定できます。
注意すべき点がいくつかあります

スコープスタイルはクラスを置き換えることはできません。ブラウザがさまざまなCSSセレクターをレンダリングする方法を考慮すると、p {color：red}のスコープが設定されている場合（つまり、機能セレクターと組み合わせている場合）、速度は何倍も遅くなります。代わりに.example {color：red}などのクラスまたはIDを使用すると、パフォーマンスへの影響が排除されます。
再帰コンポーネントでは子孫セレクターを使用するように注意してください！selectors.a.bのCSSルールの場合、.aに一致する要素に再帰サブコンポーネントが含まれていると、.bのすべてのサブコンポーネントがこのルール一致の影響を受けます。

調査する記事：

スコープスタイルのセレクターを「より深く」動作させたい場合、たとえばサブコンポーネントに影響を与える場合は、>>>演算子を使用できます。

<style scoped>
.a >>> .b {
     
      /* ... */ }
</style>

上記のコードは次のようにコンパイルされます。

.a[data-v-f3f3eg9] .b { /* ... */ }

Sassのような一部のプリプロセッサはそれを正しく解析できません>>>。この場合、代わりに/deep/または::v-deep演算子を使用できます>>>。どちらのエイリアスも機能します。

module.exports = {
    
    
    devServer : {
    
    
        hot:true,
        open : true,
        port : 8080,
        host : "0.0.0.0"
    }
}