CSSスコープの設定方法-CSSチュートリアル-php.cn

CSSスコープの設定方法

醉折花枝作酒筹

リリース： 2023-01-07 11:45:18

オリジナル

4544 人が閲覧しました

CSS では、scoped 属性を使用してスコープを設定できます。style タグにscoped 属性がある場合、その CSS は現在のコンポーネント内の要素にのみ影響します。ただし、子コンポーネントのルートノードは、親スコープの CSS と子コンポーネントのスコープ CSS の両方の影響を受けます。

CSSスコープの設定方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

Vue 単体ファイルに初めて触れたとき、style タグのscoped属性について少し戸惑いましたが、結局使ったことがないので、scopedについていくつか説明します。

標準の .vue ファイルは次のようになります:

// html内容区域
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

//相关数据及事件区域，通俗说就是我们写JS代码的地方
<script>
export default {
  name: &#39;HelloWorld&#39;,
  data () {
    return {
      msg: &#39;Welcome to Your Vue.js App&#39;
    }
  }
}
</script>

// CSS样式区域
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .hello { color: #efefef; }
</style>

ログイン後にコピー

スタイルタグにスコープ付き属性があることがわかります。スタイルタグにスコープ付き属性がある場合、その CSS は以下にのみ作用します。コンポーネント内の現在の要素。これは、Shadow DOM のスタイルのカプセル化に似ています。いくつかの注意点がありますが、プロファイルは必要ありません。 PostCSS を使用して次の変換を実現します。

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

ログイン後にコピー

変換結果:

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

ログイン後にコピー

ローカルスタイルとグローバルスタイルの混合

注目すべき点が 1 つあります。コンポーネントでは、スコープ付きスタイルとスコープなしスタイルの両方を使用できます。

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

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

ログイン後にコピー

子要素のスタイルは、子要素のルート要素と子コンポーネント内の CSS との相互作用の結果です

スコープ付きを使用した後は、親スコープのスタイルが子コンポーネントに浸透しなくなります。ただし、子コンポーネントのルートノードは、親スコープの CSS と子コンポーネントのスコープ CSS の両方の影響を受けます。この設計は、親コンポーネントがレイアウトの観点から子コンポーネントのルート要素のスタイルを調整できるようにすることを目的としています。例は次のとおりです:

子コンポーネント

<template>
    <div class="wrap">
        <p>Hello world</p>
    </div>
</template>

<style scoped>
    .wrap {
        color: #ffffff;
        background: #666666;
    }
</style>

ログイン後にコピー

親コンポーネント

<template>
    <div class="wrap">
       //ChildMOdul为上面的子组件 
       <ChildModul/>
    </div>
</tamplate>
<style scoped>
//子组件根元素样式
    .wrap {
        margin: 0 10px
    }
</style>

ログイン後にコピー

子コンポーネントには、背景色 #efefef と色 #ccc のスタイルが定義されています。親要素では、子コンポーネントのルート要素に 10px の境界線が定義されています。最終的に表示されるスタイル
CSSスコープの設定方法

上の図からわかるように、サブコンポーネントのスタイルは、サブコンポーネントのルート要素の共同アクションの結果です。親コンポーネントの -component とサブコンポーネントのスコープ付き CSS スタイル。

深さ方向に作用するセレクター

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

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

ログイン後にコピー

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

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

ログイン後にコピー

Sass などの一部のプリプロセッサは正しく解析できません>>>。この場合、代わりに /deep/ 演算子を使用できます。これは >>> のエイリアスであり、同様に機能します。前のコードを使用してみて、深度アクションセレクターを使用して、親コンポーネントで子コンポーネントのスタイルを設定します。

親コンポーネント

.wrap /deep/ .child--css {
    font-size: 36px;
  }

ログイン後にコピー

レンダリング:
CSSスコープの設定方法

高さを見ると、スタイルがサブコンポーネントに適用されていることがわかります。 Sass プリセレクターが表示されない場合、なぜ >>> の代わりに /deep/ を使用するのかを尋ねるかもしれませんが、実際にはこれがわかりません。最初に >>> を使用しました。その後、/deep/ に切り替えたところ、そのスタイルが効果的でした。無責任に言うと、>>> がダメなら /deep/ に変えればいいだけですが、とにかく親コンポーネントに書いたスタイルを子コンポーネントに浸透させるのが目的です。。。

動的に生成されたコンテンツ

v-html を通じて作成された DOM コンテンツは、スコープ内のスタイルの影響を受けません。ただし、ディープアクションセレクターを使用してスタイルを設定することはできます。

イベントに注意する必要があります

CSS スコープはクラスを置き換えることはできません: ブラウザーがさまざまな CSS セレクターをレンダリングすることを考慮してくださいちなみに、 p{ color: red } がスコープされている場合 (つまり、属性セレクターと組み合わせて使用されている場合) は何倍も遅くなります。代わりにクラスまたは ID (.example { color: red } など) を使用すると、パフォーマンスへの影響はなくなります。
再帰コンポーネントでは子孫セレクターを慎重に使用してくださいセレクター .a .b の CSS ルールの場合、.a に一致する要素に再帰サブコンポーネントが含まれる場合、.b が含まれます。すべてのサブコンポーネントがこのルールと一致します。

推奨学習: css ビデオチュートリアル

以上がCSSスコープの設定方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。