Contoh penggunaan atribut Scoped dalam petua tutorial HTML5_html5

Istimewanya, terdapat atribut baharu yang membolehkan kami mengawal atribut berbilang elemen, iaitu: berskop. Atribut berskop baharu yang muncul pada teg gaya boleh menjadikan gaya CSS hanya berkuat kuasa pada elemen tempatan Secara khusus, ia berkuat kuasa pada sub-elemen elemen yang menyimpan gaya gaya ini atribut skop baharu ditambah.

/* gaya pergi ke sini */

Gaya dengan atribut berskop hanya akan digunakan pada elemen semasa dan elemen anaknya. Gaya sebaris masih mempunyai keutamaan yang lebih tinggi daripada gaya berskop, jadi sebaiknya elakkan menggunakan gaya sebaris Berikut ialah gabungan beberapa gaya untuk membandingkan julat kecekapannya:

Salin kod


Kod adalah seperti berikut:

Sebarang teg gaya CSS yang sah, seperti pertanyaan media, boleh digunakan dalam gaya berskop, seperti ini:






Salin kod


Kod tersebut adalah seperti berikut:

@ skrin media sahaja dan (lebar maksimum : 1024px) { div { latar belakang: #000; }

}

Atribut berskop baharu ini merupakan ciri yang sangat berguna, terutamanya bagi mereka yang membuat templat, atau pengguna CMS, atau sesetengah pembangun yang tidak dapat mengendalikan keseluruhan fail gaya. Tetapi perlu diingat bahawa sesetengah penyemak imbas lama tidak menyokong atribut ini Dalam kes ini, anda mungkin perlu menggunakan pemalam jQuery (https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin. ) untuk menyelesaikan masalah ini.