Những ký tự nào là hợp lệ trong tên / bộ chọn lớp CSS?

Những ký tự / ký hiệu nào được phép trong các bộ chọn lớp CSS ?
Tôi biết rằng các ký tự sau là không hợp lệ , nhưng những ký tự nào là hợp lệ ?

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

Bạn có thể kiểm tra trực tiếp tại ngữ pháp CSS .

Về cơ bản ¹ , một tên phải bắt đầu bằng dấu gạch dưới ( _), dấu gạch nối ( -) hoặc chữ cái ( a- z), theo sau là bất kỳ số dấu gạch nối, dấu gạch dưới, chữ cái hoặc số. Có một nhược điểm: nếu ký tự đầu tiên là dấu gạch nối, ký tự thứ hai phải là ² chữ cái hoặc dấu gạch dưới và tên phải dài ít nhất 2 ký tự.

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

Nói tóm lại, quy tắc trước đó dịch theo sau, được trích xuất từ ​​thông số W3C. :

Trong CSS, các mã định danh (bao gồm tên thành phần, lớp và ID trong bộ chọn) chỉ có thể chứa các ký tự [a-z0-9] và ISO 10646 ký tự U + 00A1 trở lên, cộng với dấu gạch nối (-) và dấu gạch dưới (_) ; chúng không thể bắt đầu bằng một chữ số hoặc dấu gạch nối theo sau là một chữ số. Mã định danh cũng có thể chứa các ký tự thoát và bất kỳ ký tự ISO 10646 nào dưới dạng mã số (xem mục tiếp theo). Chẳng hạn, định danh "B & W?" có thể được viết là "B \ & W \?" hoặc "B \ 26 W \ 3F".

Mã định danh bắt đầu bằng dấu gạch nối hoặc dấu gạch dưới thường được dành riêng cho các tiện ích mở rộng dành riêng cho trình duyệt, như trong -moz-opacity.

¹ Tất cả đã trở nên phức tạp hơn một chút bằng cách đưa vào các ký tự unicode đã thoát (mà không ai thực sự sử dụng).

² Lưu ý rằng, theo ngữ pháp tôi đã liên kết, một quy tắc bắt đầu bằng dấu gạch nối TWO, ví dụ: --indent1không hợp lệ. Tuy nhiên, tôi khá chắc chắn rằng tôi đã nhìn thấy điều này trong thực tế.

Tôi ngạc nhiên khi hầu hết các câu trả lời ở đây là sai. Hóa ra:

Bất kỳ ký tự nào ngoại trừ NUL đều được phép trong các tên lớp CSS trong CSS. (Nếu CSS có chứa NUL (đã thoát hoặc không), kết quả không được xác định. [ CSS-character ])

Câu trả lời của Mathias Bynens liên kết đến lời giải thích và bản demo cho thấy cách sử dụng những tên này. Được viết bằng mã CSS, một tên lớp có thể cần thoát , nhưng điều đó không thay đổi tên lớp. Ví dụ, một đại diện thoát quá mức không cần thiết sẽ trông khác với các đại diện khác của tên đó, nhưng nó vẫn đề cập đến cùng một tên lớp.

Hầu hết các ngôn ngữ (lập trình) khác không có khái niệm thoát tên biến (Số nhận dạng của Wap), vì vậy tất cả các biểu diễn của một biến phải trông giống nhau. Đây không phải là trường hợp trong CSS.

Lưu ý rằng trong HTML không có cách nào để bao gồm các ký tự khoảng trắng (dấu cách, tab, nguồn cấp dữ liệu, nguồn cấp dữ liệu biểu mẫu và trả về vận chuyển) trong một thuộc tính tên lớp , vì chúng đã tách các lớp với nhau.

Vì vậy, nếu bạn cần biến một chuỗi ngẫu nhiên thành tên lớp CSS: hãy quan tâm đến NUL và dấu cách và thoát (phù hợp với CSS hoặc HTML). Làm xong.

Tôi đã trả lời sâu câu hỏi của bạn ở đây: http://mathiasbynens.be/notes/css-escapes

Bài viết cũng giải thích cách thoát bất kỳ ký tự nào trong CSS (và JavaScript) và tôi cũng đã tạo ra một công cụ tiện dụng cho việc này. Từ trang đó:

Nếu bạn định cung cấp cho một phần tử giá trị ID ~!@$%^&*()_+-=,./';:"?><[]{}|`#, thì bộ chọn sẽ trông như thế này:

CSS:

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

JavaScript:

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

Đọc thông số kỹ thuật của W3C . (đây là CSS 2.1, hãy tìm phiên bản phù hợp với giả định của bạn về trình duyệt)

chỉnh sửa: đoạn có liên quan sau:

Trong CSS, các mã định danh (bao gồm tên thành phần, lớp và ID trong bộ chọn) chỉ có thể chứa các ký tự [a-z0-9] và ISO 10646 ký tự U + 00A1 trở lên, cộng với dấu gạch nối (-) và dấu gạch dưới (_) ; chúng không thể bắt đầu bằng một chữ số hoặc dấu gạch nối theo sau là một chữ số. Mã định danh cũng có thể chứa các ký tự thoát và bất kỳ ký tự ISO 10646 nào dưới dạng mã số (xem mục tiếp theo). Chẳng hạn, định danh "B & W?" có thể được viết là "B \ & W \?" hoặc "B \ 26 W \ 3F".

chỉnh sửa 2: như @mipadi chỉ ra trong câu trả lời của Triptych, có cảnh báo này , cũng trong cùng một trang web:

Trong CSS, số nhận dạng có thể bắt đầu bằng '-' (dấu gạch ngang) hoặc '_' (gạch dưới). Từ khóa và tên thuộc tính bắt đầu bằng '-' hoặc '_' được dành riêng cho các tiện ích mở rộng dành riêng cho nhà cung cấp. Các tiện ích mở rộng dành riêng cho nhà cung cấp phải có một trong các định dạng sau:

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

Ví dụ:

Ví dụ: nếu tổ chức XYZ đã thêm một thuộc tính để mô tả màu của đường viền ở phía Đông của màn hình, họ có thể gọi nó là màu -xyz-Border-East-color.

Các ví dụ đã biết khác:

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

Dấu gạch ngang hoặc dấu gạch dưới ban đầu được đảm bảo không bao giờ được sử dụng trong thuộc tính hoặc từ khóa theo bất kỳ cấp độ CSS hiện tại hoặc tương lai nào. Do đó, việc triển khai CSS điển hình có thể không nhận ra các thuộc tính đó và có thể bỏ qua chúng theo các quy tắc để xử lý các lỗi phân tích cú pháp. Tuy nhiên, vì dấu gạch ngang hoặc dấu gạch dưới ban đầu là một phần của ngữ pháp, người triển khai CSS 2.1 phải luôn có thể sử dụng trình phân tích cú pháp tuân thủ CSS, cho dù họ có hỗ trợ bất kỳ tiện ích mở rộng cụ thể nào của nhà cung cấp hay không.

Tác giả nên tránh các phần mở rộng dành riêng cho nhà cung cấp

Biểu thức chính quy hoàn chỉnh là:

-?(?:[_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])*

Vì vậy, tất cả các nhân vật được liệt kê của bạn, ngoại trừ phạm lỗi -và phạm _lỗi không được phép nếu được sử dụng trực tiếp. Nhưng bạn có thể mã hóa chúng bằng dấu gạch chéo ngược foo\~barhoặc sử dụng ký hiệu unicode foo\7E bar.

Đối với những người tìm kiếm một cách giải quyết, bạn có thể sử dụng một bộ chọn thuộc tính, ví dụ, nếu lớp của bạn bắt đầu bằng một số. Thay đổi:

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

đến đây:

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

Ngoài ra, nếu có nhiều lớp, bạn sẽ cần chỉ định chúng trong bộ chọn tôi nghĩ.

Nguồn:

1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and- class-name /
2. Có một cách giải quyết để làm cho các lớp CSS có tên bắt đầu bằng số hợp lệ không?

Hiểu biết của tôi là gạch dưới có giá trị kỹ thuật. Thủ tục thanh toán:

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

"... errata với đặc điểm kỹ thuật được công bố vào đầu năm 2001 đã lần đầu tiên nhấn mạnh hợp pháp."

Bài viết được liên kết ở trên nói rằng không bao giờ sử dụng chúng, sau đó đưa ra một danh sách các trình duyệt không hỗ trợ chúng, tất cả trong số đó, về mặt số lượng người dùng ít nhất, dự phòng dài.

Đối với các lớp và ID HTML5 / CSS3 có thể bắt đầu bằng số.

Thoát khỏi câu trả lời của @ Triptych, bạn có thể sử dụng 2 kết quả khớp chính thức sau đây để tạo chuỗi hợp lệ:

[^a-z0-9A-Z_-]

Đây là một kết hợp ngược lại chọn bất cứ thứ gì không phải là chữ cái, số, dấu gạch ngang hoặc dấu gạch dưới để dễ dàng loại bỏ.

^-*[0-9]+

Điều này khớp với 0 hoặc 1 dấu gạch ngang theo sau là 1 hoặc nhiều số ở đầu chuỗi, cũng để dễ dàng loại bỏ.

Cách tôi sử dụng nó trong PHP:

//Make alphanumeric with dashes and underscores (removes all other characters)
$class = preg_replace("/[^a-z0-9A-Z_-]/", "", $class);
//Classes only begin with an underscore or letter
$class = preg_replace("/^-*[0-9]+/", "", $class);
//Make sure the string is 2 or more characters long
return 2 <= strlen($class) ? $class : '';