Karakter apa yang tidak digunakan dalam css?

Question

Properti hyphenate-character CSS menyetel karakter (atau string) yang digunakan di akhir baris sebelum jeda tanda hubung

Table of Contents Show

Ruang Tanpa Pemutusan
Beberapa Entitas Karakter HTML yang Berguna
Menggabungkan Tanda Diakritik
Pengidentifikasi dan string dalam CSS
Bagaimana cara menghindari karakter apa pun di CSS
Angka terdepan
Karakter khusus dalam CSS
Karakter spasi putih
Garis bawah
Karakter Unicode lainnya
Membuntuti spasi putih setelah urutan pelarian heksadesimal
…dan bagaimana dengan JavaScript?
CSS lolos alat
Tentang saya
Untuk apa karakter digunakan dalam CSS?
Manakah yang bukan merupakan atribut CSS?
Apa yang bukan pemilih CSS yang valid?
Bagaimana saya tidak menerapkan CSS ke suatu elemen?

Tanda hubung otomatis dan lunak ditampilkan sesuai dengan nilai karakter tanda hubung yang ditentukan

Nilai menetapkan string untuk digunakan sebagai pengganti tanda hubung, atau menunjukkan bahwa agen pengguna harus memilih string yang sesuai berdasarkan konvensi tipografi saat ini (default)

hyphenate-character: <string>;
hyphenate-character: auto;

<string>

<string> untuk digunakan di akhir baris sebelum jeda tanda hubung. Agen pengguna dapat memotong nilai ini jika terlalu banyak karakter yang digunakan

auto

Agen pengguna memilih string yang sesuai berdasarkan konvensi tipografi bahasa konten. Ini adalah nilai properti default, dan hanya perlu diatur secara eksplisit untuk menimpa nilai warisan yang berbeda

Nilai awalautoBerlaku untuk semua elemenInheritedyesComputed valueseperti yang ditentukanJenis animasidiskrit

hyphenate-character = 
  auto      |
  <string>

_

Contoh ini menunjukkan dua blok teks identik yang memiliki hyphens diatur untuk memastikan bahwa mereka pecah di mana pun diperlukan, dan pada jeda tanda hubung lunak (dibuat menggunakan

hyphenate-character = 
  auto      |
  <string>

0). Blok pertama memiliki nilai tanda hubung yang diubah menjadi simbol sama dengan ("

hyphenate-character = 
  auto      |
  <string>

1"). Blok kedua tidak memiliki kumpulan karakter tanda hubung, yang setara dengan

hyphenate-character = 
  auto      |
  <string>

2 untuk agen pengguna yang mendukung properti ini

Karakter yang dicadangkan dalam HTML harus diganti dengan entitas karakter

Beberapa karakter dicadangkan dalam HTML

If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.

Entitas karakter digunakan untuk menampilkan karakter yang dicadangkan dalam HTML

Entitas karakter terlihat seperti ini

&nama kesatuan;

ATAU

&#entity_number;

Untuk menampilkan tanda kurang dari (<) kita harus menulis. < atau <

Keuntungan menggunakan nama entitas. Nama entitas mudah diingat
Kerugian menggunakan nama entitas. Browser mungkin tidak mendukung semua nama entitas, tetapi dukungan untuk nomor entitas bagus

Ruang Tanpa Pemutusan

Entitas yang umum digunakan dalam HTML adalah non-breaking space.

Ruang tanpa putus adalah ruang yang tidak akan pecah menjadi baris baru

Dua kata yang dipisahkan oleh spasi yang tidak putus akan tetap bersatu (tidak pecah menjadi baris baru). Ini berguna saat melanggar kata-kata mungkin mengganggu

Contoh

Penggunaan umum lainnya dari non-breaking space adalah untuk mencegah browser memotong spasi di halaman HTML

Jika Anda menulis 10 spasi di teks Anda, browser akan menghapus 9 spasi. Untuk menambahkan spasi nyata ke teks, Anda dapat menggunakan entitas karakter

Tip. Tanda hubung tidak terputus (‑) digunakan untuk menentukan karakter tanda hubung (‑) yang tidak putus menjadi baris baru

Beberapa Entitas Karakter HTML yang Berguna

Catatan. Nama entitas peka huruf besar-kecil

Menggabungkan Tanda Diakritik

Tanda diakritik adalah "mesin terbang" yang ditambahkan ke sebuah surat

Beberapa tanda diakritik, seperti kuburan ( ̀) dan akut ( ́) disebut aksen

Tanda diakritik dapat muncul di atas dan di bawah huruf, di dalam huruf, dan di antara dua huruf

Tanda diakritik dapat digunakan dalam kombinasi dengan karakter alfanumerik untuk menghasilkan karakter yang tidak ada dalam rangkaian karakter (pengkodean) yang digunakan di halaman

Saat menulis CSS untuk markup dengan nilai atribut

<!-- HTML -->
<p class=":`("></p>

2 atau

<!-- HTML -->
<p class=":`("></p>

3 yang aneh, Anda perlu beberapa. Misalnya, Anda tidak bisa hanya menggunakan

<!-- HTML -->
<p class=":`("></p>

4 untuk menargetkan elemen dengan

<!-- HTML -->
<p class=":`("></p>

5. Sebagai gantinya, Anda harus melarikan diri dari karakter aneh (dalam hal ini, yang kedua

<!-- HTML -->
<p class=":`("></p>

6). Melakukan hal itu akan membatalkan arti karakter CSS khusus dalam pengidentifikasi dan memungkinkan Anda merujuk ke karakter yang tidak dapat Anda ketik dengan mudah, seperti simbol Unicode gila

Ada beberapa kasus lain di mana Anda mungkin ingin atau perlu keluar dari karakter di CSS. Anda bisa menulis pemilih untuk funky

<!-- HTML -->
<p class=":`("></p>

3,

<!-- HTML -->
<p class=":`("></p>

2, atribut atau nilai atribut, misalnya;

Pengidentifikasi dan string dalam CSS

Pembaruan @ Maret 2022. agar lebih selaras dengan HTML. Sisa dari bagian ini dipertahankan di sini karena alasan historis, dan menjelaskan spek lama — bukan spek terbaru

mendefinisikan pengidentifikasi menggunakan diagram token. Mereka mungkin berisi simbol dari

/* CSS */
.\3A \`\( { }

_0 sampai

/* CSS */
.\3A \`\( { }

1, dari

/* CSS */
.\3A \`\( { }

2 sampai

/* CSS */
.\3A \`\( { }

3, dari

/* CSS */
.\3A \`\( { }

4 sampai

/* CSS */
.\3A \`\( { }

5, garis bawah (

/* CSS */
.\3A \`\( { }

6), tanda hubung

/* CSS */
.\3A \`\( { }

7, non-ASCII simbol atau escape sequence. Mereka tidak boleh dimulai dengan angka, atau tanda hubung (

/* CSS */
.\3A \`\( { }

7) diikuti dengan angka. Pengidentifikasi memerlukan setidaknya satu simbol (mis. e. string kosong bukan pengenal yang valid)

Tata bahasa untuk pengidentifikasi digunakan untuk berbagai hal di seluruh spesifikasi, termasuk nama elemen, nama kelas, dan ID di pemilih

Definisi spesifikasi untuk mengatakan bahwa string dapat ditulis dengan tanda kutip ganda atau dengan tanda kutip tunggal. Tanda kutip ganda tidak dapat terjadi di dalam tanda kutip ganda, kecuali lolos (mis. g. , sebagai

/* CSS */
.\3A \`\( { }

_9 atau sebagai

/* JavaScript */
document.getElementsByClassName(':`(');
document.querySelectorAll('.\\3A \\`\\(');

0). Hal yang sama berlaku untuk tanda kutip tunggal (mis. g. ,

/* JavaScript */
document.getElementsByClassName(':`(');
document.querySelectorAll('.\\3A \\`\\(');

1 atau

/* JavaScript */
document.getElementsByClassName(':`(');
document.querySelectorAll('.\\3A \\`\\(');

2). Sebuah string tidak dapat secara langsung berisi baris baru. Untuk menyertakan baris baru dalam string, gunakan urutan escape yang mewakili karakter umpan baris (U+000A), seperti

/* JavaScript */
document.getElementsByClassName(':`(');
document.querySelectorAll('.\\3A \\`\\(');

3 atau

/* JavaScript */
document.getElementsByClassName(':`(');
document.querySelectorAll('.\\3A \\`\\(');

4. Baris baru juga dapat direpresentasikan sebagai

/* JavaScript */
document.getElementsByClassName(':`(');
document.querySelectorAll('.\\3A \\`\\(');

5 (CRLF),

/* JavaScript */
document.getElementsByClassName(':`(');
document.querySelectorAll('.\\3A \\`\\(');

6 (i. e.

/* JavaScript */
document.getElementsByClassName(':`(');
document.querySelectorAll('.\\3A \\`\\(');

7 dalam bahasa lain), atau

/* JavaScript */
document.getElementsByClassName(':`(');
document.querySelectorAll('.\\3A \\`\\(');

8 (i. e.

/* JavaScript */
document.getElementsByClassName(':`(');
document.querySelectorAll('.\\3A \\`\\(');

_9 dalam bahasa lain). Dimungkinkan untuk memutuskan string pada beberapa baris, untuk estetika atau alasan lain, tetapi dalam kasus seperti itu, baris baru itu sendiri harus di-escape dengan garis miring terbalik (

//Pseudo RegEx that I would make all HTML ID's match
^([a-z,A-Z])([_]|[-]|[a-z,A-Z]|[0-9])*$

0)

Seperti yang Anda lihat, pelolosan karakter diperbolehkan di pengidentifikasi dan string. Jadi, mari kita cari tahu bagaimana urutan pelarian ini bekerja

Bagaimana cara menghindari karakter apa pun di CSS

Berikut adalah daftar aturan sederhana yang harus Anda ingat saat keluar dari karakter di CSS. Perlu diingat bahwa jika Anda menulis pemilih untuk nama kelas atau ID tertentu, sintaks ketat untuk pengidentifikasi berlaku. Jika Anda menggunakan string (dikutip) di CSS, Anda hanya perlu menghindari tanda kutip atau karakter baris baru

Angka terdepan

Jika karakter pertama pengidentifikasi adalah numerik, Anda harus menghindarinya berdasarkan poin kode Unicode-nya. Misalnya, titik kode untuk karakter

//Pseudo RegEx that I would make all HTML ID's match
^([a-z,A-Z])([_]|[-]|[a-z,A-Z]|[0-9])*$

_1 adalah

//Pseudo RegEx that I would make all HTML ID's match
^([a-z,A-Z])([_]|[-]|[a-z,A-Z]|[0-9])*$

2, jadi Anda akan menghindarinya sebagai

//Pseudo RegEx that I would make all HTML ID's match
^([a-z,A-Z])([_]|[-]|[a-z,A-Z]|[0-9])*$

3 atau

//Pseudo RegEx that I would make all HTML ID's match
^([a-z,A-Z])([_]|[-]|[a-z,A-Z]|[0-9])*$

4

Pada dasarnya, untuk menghindari karakter numerik apa pun, awali saja dengan

//Pseudo RegEx that I would make all HTML ID's match
^([a-z,A-Z])([_]|[-]|[a-z,A-Z]|[0-9])*$

5 dan tambahkan karakter spasi (). Yay Unicode

Karakter khusus dalam CSS

Karakter apa pun yang bukan digit heksadesimal, pengumpanan baris, pengembalian kereta, atau pengumpanan formulir dapat diloloskan dengan garis miring terbalik untuk menghilangkan makna khususnya

Karakter berikut memiliki arti khusus dalam CSS.

//Pseudo RegEx that I would make all HTML ID's match
^([a-z,A-Z])([_]|[-]|[a-z,A-Z]|[0-9])*$

6,

//Pseudo RegEx that I would make all HTML ID's match
^([a-z,A-Z])([_]|[-]|[a-z,A-Z]|[0-9])*$

7,

<!-- HTML -->
<p class=":`("></p>

6,

//Pseudo RegEx that I would make all HTML ID's match
^([a-z,A-Z])([_]|[-]|[a-z,A-Z]|[0-9])*$

9,

<input name="145item" id="145item" value="Toaster/>
<input name="179item" id="179item" value="Basketball/>
<input name="512item" id="512item" value="Laptop/>
<input name="739item" id="739item" value="Gorilla/>
…

0,

<input name="145item" id="145item" value="Toaster/>
<input name="179item" id="179item" value="Basketball/>
<input name="512item" id="512item" value="Laptop/>
<input name="739item" id="739item" value="Gorilla/>
…

1,

<input name="145item" id="145item" value="Toaster/>
<input name="179item" id="179item" value="Basketball/>
<input name="512item" id="512item" value="Laptop/>
<input name="739item" id="739item" value="Gorilla/>
…

2,

<input name="145item" id="145item" value="Toaster/>
<input name="179item" id="179item" value="Basketball/>
<input name="512item" id="512item" value="Laptop/>
<input name="739item" id="739item" value="Gorilla/>
…

3,

<input name="145item" id="145item" value="Toaster/>
<input name="179item" id="179item" value="Basketball/>
<input name="512item" id="512item" value="Laptop/>
<input name="739item" id="739item" value="Gorilla/>
…

4,

<input name="145item" id="145item" value="Toaster/>
<input name="179item" id="179item" value="Basketball/>
<input name="512item" id="512item" value="Laptop/>
<input name="739item" id="739item" value="Gorilla/>
…

5,

<input name="145item" id="145item" value="Toaster/>
<input name="179item" id="179item" value="Basketball/>
<input name="512item" id="512item" value="Laptop/>
<input name="739item" id="739item" value="Gorilla/>
…

6,

<input name="145item" id="145item" value="Toaster/>
<input name="179item" id="179item" value="Basketball/>
<input name="512item" id="512item" value="Laptop/>
<input name="739item" id="739item" value="Gorilla/>
…

7,

/* CSS */
.\3A \`\( { }

7,

<input name="145item" id="145item" value="Toaster/>
<input name="179item" id="179item" value="Basketball/>
<input name="512item" id="512item" value="Laptop/>
<input name="739item" id="739item" value="Gorilla/>
…

9,

// get value of the 739 item…
var keyName = '739item';
var value = document.forms['someForm'].elements[keyName].value;
alert('The value is: ' + value);

0,

// get value of the 739 item…
var keyName = '739item';
var value = document.forms['someForm'].elements[keyName].value;
alert('The value is: ' + value);

1,

// get value of the 739 item…
var keyName = '739item';
var value = document.forms['someForm'].elements[keyName].value;
alert('The value is: ' + value);

2,

// get value of the 739 item…
var keyName = '739item';
var value = document.forms['someForm'].elements[keyName].value;
alert('The value is: ' + value);

3,

// get value of the 739 item…
var keyName = '739item';
var value = document.forms['someForm'].elements[keyName].value;
alert('The value is: ' + value);

4,

// get value of the 739 item…
var keyName = '739item';
var value = document.forms['someForm'].elements[keyName].value;
alert('The value is: ' + value);

5,

// get value of the 739 item…
var keyName = '739item';
var value = document.forms['someForm'].elements[keyName].value;
alert('The value is: ' + value);

6,

// get value of the 739 item…
var keyName = '739item';
var value = document.forms['someForm'].elements[keyName].value;
alert('The value is: ' + value);

7,

// get value of the 739 item…
var keyName = '739item';
var value = document.forms['someForm'].elements[keyName].value;
alert('The value is: ' + value);

8,

//Pseudo RegEx that I would make all HTML ID's match
^([a-z,A-Z])([_]|[-]|[a-z,A-Z]|[0-9])*$

0,

'/,!+:`(

0,

Ada dua opsi jika Anda ingin menggunakannya. Baik Anda menggunakan titik kode Unicode — misalnya, tanda plus (

<input name="145item" id="145item" value="Toaster/>
<input name="179item" id="179item" value="Basketball/>
<input name="512item" id="512item" value="Laptop/>
<input name="739item" id="739item" value="Gorilla/>
…

6) adalah U+002B, jadi jika Anda ingin menggunakannya dalam pemilih CSS, Anda akan mengubahnya menjadi

'/,!+:`(

8 (perhatikan karakter spasi di bagian akhir)

Pilihan kedua jauh lebih elegan. lepas saja karakter menggunakan garis miring terbalik (

//Pseudo RegEx that I would make all HTML ID's match
^([a-z,A-Z])([_]|[-]|[a-z,A-Z]|[0-9])*$

0), e. g.

<input name="145item" id="145item" value="Toaster/>
<input name="179item" id="179item" value="Basketball/>
<input name="512item" id="512item" value="Laptop/>
<input name="739item" id="739item" value="Gorilla/>
…

6 akan melarikan diri ke

[class*=":'/,!+:`("] {
  width: 100%;
}

2

Secara teoritis, karakter

// get value of the 739 item…
var keyName = '739item';
var value = document.forms['someForm'].elements[keyName].value;
alert('The value is: ' + value);

_1 dapat di-escape sebagai

[class*=":'/,!+:`("] {
  width: 100%;
}

4, tetapi IE < 8 tidak mengenali urutan escape tersebut dengan benar. Solusinya adalah dengan menggunakan

[class*=":'/,!+:`("] {
  width: 100%;
}

5 sebagai gantinya

Karakter spasi putih

Spasi kosong — bahkan beberapa karakter yang secara teknis tidak valid dalam nilai atribut HTML — juga dapat di-escape

Karakter apa pun yang cocok dengan

[class*=":'/,!+:`("] {
  width: 100%;
}

6 harus di-escape berdasarkan poin kode Unicode mereka. Karakter spasi () dapat berupa garis miring terbalik (________33 _____ 0). Karakter spasi lainnya tidak perlu di-escape

Garis bawah

CSS tidak mengharuskan Anda untuk keluar dari garis bawah (

/* CSS */
.\3A \`\( { }

6) tetapi jika itu muncul di awal pengidentifikasi, saya sarankan tetap melakukannya untuk mencegah IE6 mengabaikan aturan sama sekali

Karakter Unicode lainnya

Selain itu, karakter yang tidak mungkin menyampaikan makna apa pun dalam CSS (mis. g.

[class*=":'/,!+:`("] {
  width: 100%;
}

_9) dapat dan harus digunakan tanpa melarikan diri

Secara teori (sesuai spesifikasi), karakter apa pun dapat diloloskan berdasarkan titik kode Unicode seperti yang dijelaskan di atas (mis. g. untuk

//Pseudo RegEx that I would make all HTML ID's match
^([a-z,A-Z])([_]|[-]|[a-z,A-Z]|[0-9])*$

_0, simbol "tetragram untuk pusat" U+1D306.

//Pseudo RegEx that I would make all HTML ID's match
^([a-z,A-Z])([_]|[-]|[a-z,A-Z]|[0-9])*$

1 atau

//Pseudo RegEx that I would make all HTML ID's match
^([a-z,A-Z])([_]|[-]|[a-z,A-Z]|[0-9])*$

2), tetapi browser WebKit lama tidak mendukung sintaks ini untuk karakter di luar BMP (diperbaiki pada April 2012)

Karena bug browser, ada cara lain (non-standar) untuk keluar dari karakter ini, yaitu dengan memecahnya menjadi unit kode UTF-16 (mis. g.

//Pseudo RegEx that I would make all HTML ID's match
^([a-z,A-Z])([_]|[-]|[a-z,A-Z]|[0-9])*$

_3), tetapi sintaks ini (seharusnya) tidak didukung di Gecko dan Opera 12

Karena saat ini tidak ada cara untuk melarikan diri dengan gaya lintas-browser tanpa merusak kompatibilitas dengan browser lama, yang terbaik adalah menggunakan karakter ini tanpa melarikan diri.

Membuntuti spasi putih setelah urutan pelarian heksadesimal

Setiap karakter spasi U+0020 yang segera mengikuti urutan pelolosan heksadesimal secara otomatis. Misalnya, untuk menghindari teks

//Pseudo RegEx that I would make all HTML ID's match
^([a-z,A-Z])([_]|[-]|[a-z,A-Z]|[0-9])*$

_4, Anda harus menggunakan

//Pseudo RegEx that I would make all HTML ID's match
^([a-z,A-Z])([_]|[-]|[a-z,A-Z]|[0-9])*$

5, dengan dua karakter spasi setelah

//Pseudo RegEx that I would make all HTML ID's match
^([a-z,A-Z])([_]|[-]|[a-z,A-Z]|[0-9])*$

6. Karakter ruang pertama ditelan;

Karakter spasi yang mengikuti urutan escape heksadesimal hanya dapat dihilangkan jika karakter berikutnya bukan karakter spasi lain dan bukan digit heksadesimal. Misalnya,

//Pseudo RegEx that I would make all HTML ID's match
^([a-z,A-Z])([_]|[-]|[a-z,A-Z]|[0-9])*$

_7 menjadi

//Pseudo RegEx that I would make all HTML ID's match
^([a-z,A-Z])([_]|[-]|[a-z,A-Z]|[0-9])*$

8, tetapi

//Pseudo RegEx that I would make all HTML ID's match
^([a-z,A-Z])([_]|[-]|[a-z,A-Z]|[0-9])*$

9 dapat ditulis sebagai

<!-- HTML -->
<p class=":`("></p>

00

Contoh

Berikut adalah beberapa contoh acak yang menggambarkan hal ini

.\3A \`\( { } /* matches elements with class=":`(" */
.\31 a2b3c { } /* matches elements with class="1a2b3c" */
#\#fake-id {} /* matches the element with id="#fake-id" */
#-a-b-c- {} /* matches the element with id="-a-b-c-" */
#© { } /* matches the element with id="©" */

Untuk selengkapnya, lihat halaman demo untuk postingan blog di

<!-- HTML -->
<p class=":`("></p>

01 dan

<!-- HTML -->
<p class=":`("></p>

02 di HTML5

…dan bagaimana dengan JavaScript?

Dalam JavaScript, itu tergantung

<!-- HTML -->
<p class=":`("></p>

03 dan fungsi serupa seperti

<!-- HTML -->
<p class=":`("></p>

04 hanya dapat menggunakan nilai atribut yang tidak lolos, cara yang digunakan dalam HTML. Tentu saja, Anda harus mengutip apa pun sehingga Anda tetap mendapatkan string JavaScript yang valid

Di sisi lain, jika Anda menggunakan pemilih ini dengan Selectors API (mis. e.

<!-- HTML -->
<p class=":`("></p>

05 dan

<!-- HTML -->
<p class=":`("></p>

06) atau perpustakaan yang mengandalkan sintaks yang sama (e. g. jQuery/Sizzle), Anda harus mengambil dan menghindarinya lagi. Yang harus Anda lakukan hanyalah menggandakan setiap garis miring terbalik di pemilih CSS (dan tentu saja menghindari tanda kutip, jika perlu)

<!-- HTML -->
<p class=":`("></p>

/* CSS */
.\3A \`\( { }

/* JavaScript */
document.getElementsByClassName(':`(');
document.querySelectorAll('.\\3A \\`\\(');

CSS lolos alat

Mengingat semua aturan ini memang terdengar menyenangkan, tetapi untuk membuat hidup sedikit lebih mudah, saya membuat alat CSS escaper sederhana yang melakukan semua kerja keras untuk Anda

Cukup masukkan nilai dan itu akan memberi tahu Anda cara menghindarinya di CSS dan JavaScript, berdasarkan aturan di atas. Ini menggunakan atribut

<!-- HTML -->
<p class=":`("></p>

3 dalam contohnya, tetapi tentu saja Anda dapat menggunakan string yang lolos yang sama untuk nilai atribut

<!-- HTML -->
<p class=":`("></p>

2 atau properti

<!-- HTML -->
<p class=":`("></p>

9. Menikmati

Perlu menghindari teks untuk digunakan dalam string atau pengidentifikasi CSS? . Saksikan berikut ini

Memperbarui. Spesifikasi Model Objek CSS sekarang mendefinisikan , metode utilitas yang melakukan pelolosan untuk Anda. Saya telah menulis polyfill untuk itu

Catatan. Jika Anda suka membaca tentang pelolosan CSS, mengapa tidak membaca urutan pelolosan karakter JavaScript atau referensi karakter dalam HTML?

Tentang saya

Hai, yang di sana. Saya Mathias. Saya bekerja di Chrome DevTools dan mesin JavaScript V8 di Google. HTML, CSS, JavaScript, Unicode, performa, dan keamanan membuat saya bersemangat. Ikuti saya di Twitter, Mastodon, dan GitHub

Komentar

seutje menulis.

Saya sudah mengalami mimpi buruk ini karena seseorang menggunakan garis bawah di nama kelasnya dan tidak menghindarinya di CSS, yang menyebabkan IE6 mengabaikannya sepenuhnya, sementara semua browser lain dengan senang hati menerimanya tanpa melarikan diri. http. // jsbin. com/esofe3 IE6 akan menampilkan semua hijau, semua browser lain akan menampilkan semua merah

Sunting. Sebenarnya, hanya

<!-- HTML -->
<p class=":`("></p>

11 yang tidak lolos yang menjadi masalah, bukan

<!-- HTML -->
<p class=":`("></p>

12 atau

<!-- HTML -->
<p class=":`("></p>

13. Ini kasus uji yang lebih baik. http. // jsbin. com/unogus Tangkapan bagus, Nicolas Gallagher

Steve terus menulis.

Seperti halnya saya menghargai konsep artikel ini, saya perlu mengklarifikasi sesuatu

Menetapkan ID elemen untuk memulai dengan karakter angka "1,2,3,4,5,6,7,8,9,0" tidak valid. Jangan pernah melakukannya. Menggunakan string pelarian di atas untuk mengatasinya adalah peretasan, dan akan membawa Anda ke perairan yang dalam dengan cepat

Lebih penting lagi, ada BEBERAPA skenario yang diambil hati oleh Microsoft dari aturan spesifikasi ini dan JavaScript AKAN GAGAL jika Anda mencoba dan mengakses elemen yang tidak dibuat dengan pengidentifikasi ID yang valid

Saya akan SANGAT, SANGAT merekomendasikan penggunaan pengenal standar untuk semua ID… Mulai ID dengan karakter alfa “biasa”, atau garis bawah, dan gunakan karakter alfa, numerik, garis bawah, atau tanda hubung untuk sisa pengenal

Saya tidak melihat alasan yang masuk akal mengapa seseorang perlu membuat ID dalam format selain seperti yang dijelaskan di atas… Dan jika seseorang memutuskan untuk menyulap granat tangan, jangan kaget ketika semuanya meledak

//Pseudo RegEx that I would make all HTML ID's match
^([a-z,A-Z])([_]|[-]|[a-z,A-Z]|[0-9])*$

Mathias terus menulis.

Menetapkan ID elemen untuk memulai dengan karakter angka "1,2,3,4,5,6,7,8,9,0" tidak valid. Jangan pernah melakukannya

Anda mungkin ingin membaca Atribut

<!-- HTML -->
<p class=":`("></p>

_3 mendapat lebih banyak

<!-- HTML -->
<p class=":`("></p>

2y di HTML5. Bocoran. itu tidak valid di HTML4, tetapi selalu berfungsi di browser, dan HTML5 sekarang juga memungkinkan

Lebih penting lagi, ada BEBERAPA skenario yang diambil hati oleh Microsoft dari aturan spesifikasi ini dan JavaScript AKAN GAGAL jika Anda mencoba dan mengakses elemen yang tidak dibuat dengan pengidentifikasi ID yang valid

Ingin memberikan contoh di mana ID "tidak valid" seperti itu akan menyebabkan masalah?

Steve terus menulis.

Yup, jadi karena IE memiliki masalah historis dengan ID, saya tidak akan pernah mencoba dan menggunakan sesuatu yang mewah, tapi ini dia

Jadi IE memiliki beberapa bug dan salah satu yang terbesar adalah menggabungkan ruang nama atribut ID dan NAME… Bahkan hingga panggilan IE8

<!-- HTML -->
<p class=":`("></p>

16 akan benar-benar mengembalikan elemen dengan atribut

<!-- HTML -->
<p class=":`("></p>

17 yang cocok meskipun memiliki

<!-- HTML -->
<p class=":`("></p>

3 yang berbeda (atau bahkan tanpa ID)

Karena namespace yang "kabur" ini, dan upaya IE untuk "menebak" maksud pengembang, ada beberapa konsekuensi besar

Ambil contoh formulir yang di antara bidang lainnya, berisi daftar "item" yang cocok dengan catatan dari database yang ada di formulir sebagai sekelompok bidang tersembunyi dengan

<!-- HTML -->
<p class=":`("></p>

19s dan

<!-- HTML -->
<p class=":`("></p>

20s yang menggunakan "kunci" dalam database

<input name="145item" id="145item" value="Toaster/>
<input name="179item" id="179item" value="Basketball/>
<input name="512item" id="512item" value="Laptop/>
<input name="739item" id="739item" value="Gorilla/>
…

Jika Anda mencoba mengakses elemen ini dengan mengatakan, gunakan koleksi elemen FormElement seperti itu

// get value of the 739 item…
var keyName = '739item';
var value = document.forms['someForm'].elements[keyName].value;
alert('The value is: ' + value);

Kode ini sepertinya akan berfungsi, tetapi tidak di IE… Masalahnya adalah ketika IE mengulangi kumpulan elemen dari formulir, kode ini diteruskan dalam “kunci”… kunci itu bisa berupa

<!-- HTML -->
<p class=":`("></p>

20 elemen

Ketika IE mendapatkan string yang kami berikan dengan

<!-- HTML -->
<p class=":`("></p>

20 elemen, IE tidak tahu yang mana (juga browser apa pun), tetapi IE memutuskan bahwa ia akan memeriksa untuk melihat apakah nilai yang diteruskan di parse ke bilangan bulat terlebih dahulu ( . e. sebuah indeks). Kemudian jika gagal, coba sebagai

<!-- HTML -->
<p class=":`("></p>

17. Cacat mendasar ini berarti jika atribut

<!-- HTML -->
<p class=":`("></p>

_20 Anda (atau

<!-- HTML -->
<p class=":`("></p>

19 karena bug namespace) dimulai dengan angka (yang bertentangan dengan spesifikasi) saat diurai sebagai bilangan bulat… mengembalikan

<!-- HTML -->
<p class=":`("></p>

26 yang kemudian dikatakan IE pada dirinya sendiri, “oh, saya punya

Solusinya tentu saja sederhana… Cukup ikuti spesifikasi aslinya, dan beri nama elemen

<!-- HTML -->
<p class=":`("></p>

28

Ada beberapa masalah lagi… tetapi setelah melakukan pengembangan aplikasi web selama 12+ tahun, saya segera belajar untuk TIDAK menggunakan ID atau NAMA yang dimulai dengan angka. Itu akan gagal… hanya masalah waktu saja

P. S. Pada satu titik saya membahas bug di atas dengan Chris Wilson (mantan Kepala Arsitek IE) dan diarahkan ke spesifikasi. Pada dasarnya itu adalah "ya ini buggy di IE, tetapi menggunakan

<!-- HTML -->
<p class=":`("></p>

19s atau

<!-- HTML -->
<p class=":`("></p>

20s yang memulai numerik bertentangan dengan spesifikasi, jadi kami tidak memperbaikinya"

Untuk apa karakter digunakan dalam CSS?

Solusi. # karakter digunakan untuk membuat id di CSS.

Manakah yang bukan merupakan atribut CSS?

The . not() CSS pseudo-class mewakili elemen yang tidak cocok dengan daftar pemilih. Karena mencegah item tertentu untuk dipilih, ini dikenal sebagai kelas semu negasi.

Apa yang bukan pemilih CSS yang valid?

The . invalid pemilih memungkinkan Anda untuk memilih elemen

Bagaimana saya tidak menerapkan CSS ke suatu elemen?

Dalam CSS, untuk mengecualikan kelas tertentu, kita dapat menggunakan kelas semu. not selector juga dikenal sebagai negasi pseudo-class atau not selector . Pemilih ini digunakan untuk mengatur gaya ke setiap elemen yang tidak ditentukan oleh pemilih yang diberikan. Karena digunakan untuk mencegah item tertentu dari daftar item yang dipilih.

kode css