Pertanyaan Karakter mana yang valid dalam nama / pemilih kelas CSS?


Karakter / simbol apa yang diizinkan dalam pemilih kelas CSS? Saya tahu bahwa karakter berikut ini tidak valid, tapi karakter apa sah?

~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #

1053
2018-01-15 23:37


asal


Jawaban:


Anda dapat memeriksa langsung di Tata bahasa CSS.

Pada dasarnya1, nama harus dimulai dengan garis bawah (_), tanda hubung (-), atau surat (a-z), diikuti oleh sejumlah tanda hubung, setrip bawah, huruf, atau angka. Ada tangkapan: jika karakter pertama adalah tanda hubung, karakter kedua harus2 menjadi huruf atau garis bawah, dan nama harus minimal 2 karakter.

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

Pengidentifikasi yang dimulai dengan tanda hubung atau garis bawah biasanya disediakan untuk ekstensi khusus peramban, seperti pada -moz-opacity.

1 Itu semua dibuat sedikit lebih rumit dengan masuknya karakter unicode melarikan diri (bahwa tidak ada yang benar-benar menggunakan).

2 Perhatikan bahwa, menurut tata bahasa I yang ditautkan, aturan yang dimulai dengan DUA tanda hubung, mis. --indent1, tidak valid. Namun, saya cukup yakin saya telah melihat ini dalam praktek.


914
2018-01-15 23:42



Yang mengejutkan, sebagian besar jawaban di sini salah. Ternyata itu:

Karakter apa pun kecuali NUL diizinkan dalam nama kelas CSS dalam CSS. (Jika CSS berisi NUL (lolos atau tidak), hasilnya tidak terdefinisi. [Karakter-CSS])

Jawaban Mathias Bynens tautan ke penjelasan dan demo menunjukkan bagaimana menggunakan nama-nama ini. Tertulis dalam kode CSS, nama kelas mungkin perlu melarikan diri, tetapi itu tidak mengubah nama kelas. Misalnya. representasi yang tidak perlu over-escape akan terlihat berbeda dari representasi lain dari nama itu, tetapi masih mengacu pada nama kelas yang sama.

Sebagian besar bahasa pemrograman (lain) tidak memiliki konsep nama variabel yang melarikan diri ("pengenal"), jadi semua representasi variabel harus terlihat sama. Ini tidak terjadi di CSS.

Perhatikan bahwa dalam HTML tidak ada cara untuk memasukkan karakter ruang (spasi, tab, umpan garis, umpan formulir, dan carriage return) di sebuah atribut nama kelas, karena mereka sudah memisahkan kelas satu sama lain.

Jadi, jika Anda perlu mengubah string acak menjadi nama kelas CSS: urus NUL dan ruang, dan melarikan diri (sesuai untuk CSS atau HTML). Selesai


138
2017-07-18 12:32



Membaca Spesifikasi W3C. (ini adalah CSS 2.1, temukan versi yang sesuai untuk asumsi Anda tentang browser)

edit: paragraf yang relevan berikut:

Dalam CSS, pengidentifikasi (termasuk   nama elemen, kelas, dan ID di   penyeleksi) hanya dapat berisi   karakter [a-z0-9] dan ISO 10646   karakter U + 00A1 dan lebih tinggi, ditambah   tanda hubung (-) dan garis bawah (_);   mereka tidak dapat memulai dengan angka, atau a   tanda hubung diikuti oleh digit.   Pengenal juga dapat mengandung escape   karakter dan karakter ISO 10646 apa pun   sebagai kode numerik (lihat item berikutnya). Untuk   Misalnya, pengenal "B & W?" mungkin   ditulis sebagai "B \ & W \?" atau "B \ 26 W \ 3F".

sunting 2: seperti @mipadi menunjukkan dalam jawaban Triptych, ada ini peringatan, juga di halaman web yang sama:

Dalam CSS, pengidentifikasi dapat dimulai dengan '-'   (dash) atau '_' (underscore). Kata kunci   dan nama properti yang diawali dengan '-'   atau '_' dicadangkan untuk   ekstensi khusus vendor. Seperti itu   ekstensi khusus vendor seharusnya   salah satu format berikut:

'-' + vendor identifier + '-' + meaningful name 
'_' + vendor identifier + '-' + meaningful name

Contoh (s):

Misalnya, jika organisasi XYZ ditambahkan   sebuah properti untuk menggambarkan warna   perbatasan di sisi Timur   display, mereka mungkin menyebutnya   -xyz-border-east-color.

Contoh lain yang dikenal:

 -moz-box-sizing
 -moz-border-radius
 -wap-accesskey

Tanda hubung atau garis bawah awal adalah   dijamin tidak pernah digunakan dalam   properti atau kata kunci dengan arus atau   tingkat masa depan CSS. Jadi tipikal CSS   implementasi mungkin tidak mengenali hal tersebut   properti dan mungkin mengabaikannya   sesuai dengan aturan untuk penanganan   parsing error. Namun, karena itu   dash awal atau garis bawah adalah bagian dari   tata bahasa, pelaksana CSS 2.1   harus selalu bisa menggunakan   Pengurai yang sesuai dengan CSS, baik atau tidak   mereka mendukung vendor tertentu   ekstensi.

Penulis harus menghindari spesifik vendor   ekstensi


64
2018-01-15 23:45



Saya telah menjawab pertanyaan Anda secara mendalam di sini: http://mathiasbynens.be/notes/css-escapes

Artikel ini juga menjelaskan bagaimana cara meloloskan karakter apa pun dalam CSS (dan JavaScript), dan saya membuatnya alat yang berguna untuk ini juga. Dari halaman itu:

Jika Anda memberi sebuah elemen nilai ID ~!@$%^&*()_+-=,./';:"?><[]{}|`#, pemilih akan terlihat seperti ini:

CSS:

<style>
  #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\#
  {
    background: hotpink;
  }
</style>

JavaScript:

<script>
  // document.getElementById or similar
  document.getElementById('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#');
  // document.querySelector or similar
  $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#');
</script>

58
2017-07-06 06:41



Ekspresi reguler lengkapnya adalah:

-?(?:[_a-z]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*

Jadi semua karakter Anda yang terdaftar kecuali "-"Dan"_"Tidak diizinkan jika digunakan secara langsung. Tetapi Anda dapat menyandikan mereka menggunakan backslash foo\~bar atau menggunakan notasi unicode foo\7E bar.


21
2018-01-16 00:05



Untuk kelas dan ID HTML5 / CSS3 dapat dimulai dengan angka.


6
2017-10-12 14:04



Bagi mereka yang mencari solusi, Anda dapat menggunakan pemilih atribut, misalnya, jika kelas Anda dimulai dengan angka. Perubahan:

.000000-8{background:url(../../images/common/000000-0.8.png);} /* DOESN'T WORK!! */

untuk ini:

[class="000000-8"]{background:url(../../images/common/000000-0.8.png);} /* WORKS :) */

Juga, jika ada beberapa kelas, Anda harus menentukan mereka di pemilih saya pikir.

Sumber:

  1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
  2. Apakah ada solusi untuk membuat kelas CSS dengan nama yang dimulai dengan angka yang valid?

6
2018-06-23 17:33



Pemahaman saya adalah bahwa garis bawah secara teknis valid. Periksa:

https://developer.mozilla.org/en/underscores_in_class_and_id_names

"... errata dengan spesifikasi yang diterbitkan pada awal 2001 dibuat menggarisbawahi hukum untuk pertama kalinya."

Artikel terkait di atas mengatakan tidak pernah menggunakannya, lalu berikan daftar browser yang tidak mendukungnya, yang semuanya, dalam hal jumlah pengguna setidaknya, lama-redundan.


4
2017-07-31 05:33