Bagaimana untuk menetapkan skop css

Dalam CSS, anda boleh menggunakan atribut berskop untuk menetapkan skop apabila teg gaya mempunyai atribut berskop, CSSnya hanya mempengaruhi elemen dalam komponen semasa. Walau bagaimanapun, nod akar komponen kanak-kanak akan dipengaruhi oleh kedua-dua CSS skop induk dan CSS skop kanak-kanak.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Apabila saya mula-mula berhubung dengan fail tunggal Vue, saya agak keliru tentang atribut skop dalam teg gaya Lagipun, saya tidak pernah menggunakannya sebelum ini.

Fail .vue standard kelihatan seperti ini:

// 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>

Anda boleh melihat bahawa terdapat atribut berskop dalam teg gaya Apabila teg gaya mempunyai atribut berskop, CSSnya sahaja berfungsi elemen dalam komponen semasa. Ini serupa dengan pengkapsulan gaya dalam DOM bayangan. Ia mempunyai beberapa kaveat, tetapi tidak memerlukan sebarang profil. Ia mencapai transformasi berikut dengan menggunakan PostCSS:

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

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

Hasil transformasi:

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

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

Mencampurkan gaya tempatan dan global

Sedikit berbaloi Ambil perhatian bahawa anda boleh menggunakan kedua-dua gaya berskop dan tidak berskop dalam komponen:

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

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

Gaya elemen kanak-kanak ialah hasil tindakan bersama elemen akar elemen kanak-kanak dan CSS dalam komponen kanak-kanak

Selepas menggunakan skop, gaya skop induk tidak akan menembusi komponen anak. Walau bagaimanapun, nod akar komponen anak akan dipengaruhi oleh kedua-dua CSS skop induk dan CSS skop komponen anak. Reka bentuk ini adalah supaya komponen induk boleh melaraskan gaya elemen akar komponen anaknya dari perspektif reka letak Contohnya adalah seperti berikut:

Komponen anak

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

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

Komponen induk.

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

Subkomponen mentakrifkan gaya dengan warna latar belakang #efefef dan warna #ccc Dalam elemen induk, jidar 10px ditakrifkan untuk elemen akar subkomponen. dan gaya akhir yang dipaparkan oleh sub-modul Ia kelihatan seperti ini:

Seperti yang anda boleh lihat daripada rajah di atas, gaya subkomponen adalah hasil daripada tindakan bersama elemen akar subkomponen dalam komponen induk dan gaya CSS berskop dalam subkomponen.

Pemilih bertindak mendalam

Jika anda mahu pemilih dalam gaya skop bertindak "lebih mendalam", seperti mempengaruhi komponen kanak-kanak, anda boleh menggunakan >> ; >Operator:

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

Kod di atas akan disusun menjadi:

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

Sesetengah prapemproses seperti Sass tidak dapat menghuraikan dengan betul>>>. Dalam kes ini, anda boleh menggunakan operator /deep/ sebaliknya – ini adalah alias untuk >>> Cuba gunakan kod sebelumnya dan gunakan pemilih kedalaman untuk menggayakan komponen anak dalam komponen induk:

Komponen induk

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

Rendering:

Seperti yang anda boleh lihat dari ketinggian, gaya telah digunakan pada subkomponen. Saya tahu anda mungkin ingin bertanya mengapa anda menggunakan /deep/ dan bukannya >>> tidak berfungsi. Kemudian saya beralih ke /deep/ dan gayanya berkesan. Untuk menjadi tidak bertanggungjawab, jika >>> tidak berfungsi, tukar sahaja kepada /deep/ Bagaimanapun, tujuannya adalah untuk membolehkan gaya yang ditulis dalam komponen induk menembusi ke dalam komponen anak. . .

Kandungan yang dijana secara dinamik

Kandungan DOM yang dibuat melalui v-html tidak dipengaruhi oleh gaya dalam skop. Tetapi anda masih boleh menggayakannya melalui pemilih tindakan mendalam.

Acara yang perlu diberi perhatian

• Skop CSS tidak boleh menggantikan kelas: Memandangkan penyemak imbas menghasilkan pelbagai cara pemilih CSS, apabila p{ color: red } adalah berskop (iaitu apabila digunakan dalam kombinasi dengan pemilih atribut) ia akan menjadi lebih perlahan. Jika anda menggunakan kelas atau id sebaliknya, seperti .example { color: red }, impak prestasi akan dihapuskan.

• Berhati-hati dengan pemilih turunan dalam komponen rekursif Untuk peraturan CSS dalam pemilih .a .b, jika elemen padanan .a mengandungi subkomponen rekursi, maka .b dalam semua subkomponen akan dipadankan dengan peraturan ini.

Pembelajaran yang disyorkan: tutorial video css

Atas ialah kandungan terperinci Bagaimana untuk menetapkan skop css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!