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


Ký tự / ký hiệu nào được phép trong bộ chọn lớp CSS? Tôi biết rằng các ký tự sau đây là không hợp lệnhưng nhân vật là gì có hiệu lực?

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

1055
2018-01-15 23:37


gốc


Câu hỏi liên quan: stackoverflow.com/questions/2812072/… - BalusC
những gì về utf8 ký tự? Giống như tôi có thể gõ ở Hy Lạp - GorillaApe
Các ký tự đặc biệt có thể được sử dụng trong các tên lớp bằng cách thoát chúng - trong tệp CSS của bạn, bạn có thể xác định .hello/worldlớp bằng cách thoát dấu gạch chéo ngược: .hello\2fworld, hello\2f world hoặc là hello\/world - wyqydsyq
Một câu hỏi liên quan khác, không phải về "cú pháp của tên", mà là "cú pháp của thuộc tính lớp" khi thể hiện nhiều tên. - Peter Krauss
Bạn cũng có thể sử dụng biểu tượng cảm xúc. npmjs.com/package/postcss-modules-emoji-classname - Kevin Suttle


Các câu trả lời:


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

Về cơ bản1, tên phải bắt đầu bằng dấu gạch dưới (_), dấu nối (-), hoặc một lá thư (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ố nào. Có một sự bắt giữ: nếu ký tự đầu tiên là dấu gạch ngang, ký tự thứ hai phải2 là một 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-]*

Các số nhận dạng bắt đầu bằng dấu gạch ngang 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.

1 Tất cả đều phức tạp hơn một chút khi bao gồm các ký tự unicode thoát (mà không ai thực sự sử dụng).

2 Lưu ý rằng, theo ngữ pháp tôi đã liên kết, quy tắc bắt đầu bằng HAI dấu gạch ngang, ví dụ: --indent1, không có hiệu lực. Tuy nhiên, tôi khá chắc chắn tôi đã nhìn thấy điều này trong thực tế.


915
2018-01-15 23:42



NB: W3C nói rằng việc sử dụng hàng đầu '-' hoặc '_' nên được dành riêng cho các tiện ích CSS dành riêng cho nhà cung cấp (ví dụ: các lớp -moz * được trình duyệt Mozilla triển khai). - mipadi
Các \ -các hình ảnh thường được sử dụng, nhưng thường chủ yếu cho các mục đích của hacks CSS, cô lập các trình duyệt không hỗ trợ chúng. - bobince
Để cập nhật nhận xét của @Pim Jager sau hai năm, theo w3counter.com/globalstats.php IE6 hiện đang được sử dụng bởi ít hơn 3% người dùng, sau IE9 trên 4%, IE7 trên 9%, IE8 trên 22%. Tất cả các phiên bản của Firefox đều có 28%, tất cả các phiên bản của Chrome đều có 17%. - Daniel Earwicker
Tất cả mọi thứ có thể được thoát. mothereffingcssescapes.com/#--indent1 - Mathias Bynens
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F". Vì thế - --indent1 không hợp lệ và cần phải được thoát như \--indent1 (-- các lớp học phá vỡ trên iOS, ví dụ) - eithed


Tôi ngạc nhiên nhất câu trả lời ở đây là sai. Nó chỉ ra rằng:

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

Câu trả lời của Mathias Bynens liên kết đến giải trình và bản trình diễn hiển thị cách sử dụng các tên này. Được viết xuống trong mã CSS, tên lớp có thể cần thoát, nhưng điều đó không làm thay đổi tên lớp. Ví dụ. một biểu diễn vượt trội không cần thiết sẽ trông khác với các biểu 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ữ khác (lập trình) không có khái niệm về việc thoát các tên biến ("các mã định danh"), vì vậy tất cả các biểu diễn của một biến phải 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 ký tự khoảng trắng (dấu cách, tab, nguồn cấp dữ liệu dòng, nguồn cấp dữ liệu biểu mẫu và trả lại vận chuyển) trong một thuộc tính tên lớp, bởi vì họ đã tách các lớp với nhau.

Vì vậy, nếu bạn cần phải biến một chuỗi ngẫu nhiên thành một tên lớp CSS: chăm sóc NUL và không gian, và thoát (tương ứng với CSS hoặc HTML). Làm xong.


138
2017-07-18 12:32



Dòng đầu tiên của câu trả lời của bạn phải là "câu trả lời nhất ở đây là lỗi thời / chỉ áp dụng cho CSS2". - Salman A
@SalmanA Các câu trả lời tôi đề cập đến là sai từ đầu. Chúng không áp dụng cho CSS2.1, CSS2 hay CSS1. - Robert Siemer
@RobertSiemer điểm tốt, tôi đã chuyển nhận xét của tôi đến stackoverflow.com/questions/50812118/… (không bao giờ ít liên quan đến chủ đề này) - Pedi T.


Đọc Thông số W3C. (đây là CSS 2.1, tìm phiên bản phù hợp cho giả định của bạn về các trình duyệt)

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

Trong CSS, số nhận dạng (bao gồm   tên, lớp và ID phần tử trong   bộ chọn) chỉ có thể chứa   ký tự [a-z0-9] và ISO 10646   ký tự U + 00A1 và cao hơn, cộng với   dấu gạch ngang (-) và dấu gạch dưới (_);   họ không thể bắt đầu bằng chữ số hoặc   dấu gạch ngang theo sau là một chữ số.   Mã định danh cũng có thể chứa   ký tự và bất kỳ ký tự ISO 10646 nào   dưới dạng mã số (xem mục tiếp theo). Dành cho   ví dụ, số nhận dạng "B & W?" có lẽ   đượ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ó điều này báo trước, 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 '_' (dấu 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   tiện ích dành riêng cho nhà cung cấp. Như là   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 được thêm vào   một tài sản để mô tả màu sắc của   biên giới ở phía Đông của   hiển thị, họ có thể gọi nó   -xyz-biên-đông-màu.

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

Tác giả nên tránh nhà cung cấp cụ thể   phần mở rộng


64
2018-01-15 23:45



??? "bao gồm tên phần tử, lớp học"? - Jason S
Tôi đã đề cập đến bản chỉnh sửa thứ hai của bạn về các dấu gạch ngang và dấu gạch dưới hàng đầu, nhưng quên làm rõ điều đó. Xin lỗi vì sự nhầm lẫn. - Albin


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

Bài viết cũng giải thích cách thoát khỏi bất kỳ ký tự nào trong CSS (và JavaScript) và tôi đã thực hiện một công cụ hữu ích cho điều này là tốt. Từ trang đó:

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

CSS:

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

JavaScript:

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

58
2017-07-06 06:41



1 nhưng tại sao bạn cần phải có một lớp học tên đó !! : P - Darryl Hein
@ Darryl Tất nhiên, đây là một ví dụ khá khắc nghiệt, nhưng những thứ như class="404-error" có thể hữu ích. - Mathias Bynens
tôi có một ví dụ: tôi chuyển đổi đầu ra của hệ thống đánh dấu cú pháp thành CSS. nó có các tên lớp như “ISO C ++: Types (_t /_kiểu)". nếu tôi chỉ thay thế khoảng trống, tôi có tên lớp hợp lệ. - flying sheep
Trên trang web của bạn, bạn nói rằng ký tự khoảng trắng có thể là dấu gạch chéo ngược được thoát. Khi tôi thử nó trong một tên lớp, tôi không thể làm cho nó hoạt động được. Tôi nhận thấy không có không gian trong ví dụ này. Có thể không? - Adamarla
Như với hầu hết mọi thứ trong cuộc sống, có vẻ như trong CSS rằng có sự khác biệt giữa "pháp lý về mặt kỹ thuật với cực đoan" và "lành mạnh". - Volksman


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ả nhân vật được liệt kê của bạn ngoại trừ “-”Và“_”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\~bar hoặc sử dụng ký hiệu unicode foo\7E bar.


21
2018-01-16 00:05



tại sao [\200-\377]? [\178-\1114112] được cho phép không thoát trong CSS 3. - flying sheep
\377 ở đây thực sự là sai. Có một lưu ý về phần Ngữ pháp của CSS2.1 của máy quét Lexical mà nói: "The" \ 377 "đại diện cho số ký tự cao nhất mà phiên bản hiện tại của Flex có thể xử lý (thập phân 255). Nó nên được đọc là" \ 4177777 "( thập phân 1114111), là điểm mã cao nhất có thể có trong Unicode / ISO-10646. " Nó cũng nên đến từ \240 là tốt, không \377. Tôi đoán đây là 7 năm nay mặc dù vậy mọi thứ có lẽ đã thay đổi một chút kể từ đó. - James Donnelly
Tôi tin rằng một biểu thức chính quy chính xác hơn sẽ là -?(?:[_a-z]|(?![\u0000-\u0239]).*|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|(?![\u0000-\u0239]).*|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*. - James Donnelly
@ JamesDonnelly Xin vui lòng chỉnh sửa câu trả lời của tôi nếu bạn nghĩ rằng nó cần một số cập nhật. - Gumbo


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


6
2017-10-12 14:04



Bạn có một nguồn cho điều này? Có lẽ tôi đang thiếu một cái gì đó, nhưng Thông số bộ chọn CSS3 liên kết đến định nghĩa định danh trong thông số kỹ thuật CSS 2.1 không cho phép số hàng đầu. - Ryan
@ Ryan: Đây là tài nguyên cho điều đó: mathiasbynens.be/notes/html5-id-class - Mathias Bynens
w3.org/TR/2003/WD-css3-syntax-20030813/#characters <- vẫn không cho phép số hàng đầu, vv (mặc dù nó hoạt động) - Jamie Pate
HTML 5 cho phép các lớp và ID bắt đầu bằng một số (ví dụ: class="1a"). Tuy nhiên, mã định danh CSS không thể bắt đầu bằng một số (ví dụ: .1a sẽ không hoạt động). Bạn có thể thoát khỏi nó, khó khăn (ví dụ: .\31 a hoặc là .\000031a). - Oriol
Mặc dù nó thường hoạt động trong CSS, nhưng có vẻ như nó vẫn chưa chính thức. "Tên thuộc tính và tên quy tắc luôn là số nhận dạng, phải bắt đầu bằng một chữ cái hoặc dấu gạch ngang theo sau là một chữ cái và sau đó có thể chứa chữ cái, số, dấu gạch ngang hoặc dấu gạch dưới". - - w3.org/TR/css3-syntax/#syntax-description - Stickers


Đối với những người đang tìm cách giải quyết, bạn có thể sử dụng 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 phải xác định chúng trong bộ chọn mà tôi nghĩ.

Nguồn:

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

6
2018-06-23 17:33





Sự hiểu biết của tôi là dấu gạch dưới là hợp lệ về mặt kỹ thuật. Kiểm tra:

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

"... errata với đặc điểm kỹ thuật được xuất bản vào đầu năm 2001 làm cho gạch dưới hợp pháp lần đầu tiên."

Bài viết được liên kết ở trên nói không bao giờ sử dụng chúng, sau đó cung cấp danh sách các trình duyệt không hỗ trợ chúng, tất cả đều là số lượng người dùng ít nhất, dài thừa.


4
2017-07-31 05:33