อักขระใดถูกต้องในชื่อคลาส / ตัวเลือก CSS

1203

อนุญาตให้ใช้อักขระ / สัญลักษณ์ใดได้บ้างในตัวเลือกคลาสCSS
ฉันรู้ว่าตัวอักษรต่อไปนี้ไม่ถูกต้องแต่ตัวอักษรอะไรถูกต้อง ?

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

css css-selectors

— ดาร์ริลเฮน
แหล่งที่มา

5

คำถามที่เกี่ยวข้อง: stackoverflow.com/questions/2812072/…

— BalusC

32

สิ่งที่เกี่ยวกับ utf8 ตัวอักษร? เช่นฉันอาจพิมพ์ภาษากรีก

— GorillaApe

9

อักขระพิเศษสามารถใช้ในชื่อชั้นหนีพวกเขา - ในไฟล์ CSS ของคุณคุณสามารถกำหนด.hello/worldระดับหนีเครื่องหมาย: .hello\2fworld, hello\2f worldหรือhello\/world

— wyqydsyq

1

อีกคำถามที่เกี่ยวข้องไม่ได้เกี่ยวกับ "ไวยากรณ์ของชื่อ" แต่เกี่ยวกับ "ไวยากรณ์ของแอตทริบิวต์คลาส" เมื่อการแสดงหลายชื่อ

— Peter Krauss

2

คุณยังสามารถใช้อิโมจิ npmjs.com/package/postcss-modules-emoji-classname

— Kevin Suttle

1024

คุณสามารถตรวจสอบได้โดยตรงที่ไวยากรณ์ CSS

โดยทั่วไป¹ชื่อจะต้องเริ่มต้นด้วยเครื่องหมายขีดล่าง ( _) เครื่องหมายยัติภังค์ ( -) หรือตัวอักษร ( a- z) ตามด้วยเครื่องหมายขีดกลางใด ๆ ขีดล่างตัวอักษรหรือตัวเลข มีการจับคือ: ถ้าตัวอักษรตัวแรกคือยัติภังค์ตัวละครที่สองจะต้อง²เป็นตัวอักษรหรือขีดล่างและชื่อจะต้องมีความยาวอย่างน้อย 2 ตัวอักษร

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

ในระยะสั้นกฎก่อนหน้านี้แปลต่อไปนี้แยกจากข้อมูลจำเพาะ W3C :

ใน CSS ตัวระบุ (รวมถึงชื่อองค์ประกอบคลาสและรหัสในตัวเลือก) สามารถมีได้เฉพาะอักขระ [a-z0-9] และ ISO 10646 ตัวอักษร U + 00A1 และสูงกว่ารวมถึงเครื่องหมายขีดกลาง (-) และเครื่องหมายขีดล่าง (_) ; พวกเขาไม่สามารถเริ่มต้นด้วยตัวเลขหรือยัติภังค์ตามด้วยตัวเลข ตัวระบุสามารถมีอักขระที่ใช้ Escape และตัวอักษร ISO 10646 เป็นรหัสตัวเลขได้ (ดูรายการถัดไป) ตัวอย่างเช่นตัวระบุ "B&W?" อาจเขียนเป็น "B \ & W \?" หรือ "B \ 26 W \ 3F"

-moz-opacityตัวบ่งชี้ที่เริ่มต้นด้วยยัติภังค์หรือขีดล่างมักจะถูกสงวนไว้สำหรับส่วนขยายเบราว์เซอร์ที่เฉพาะเจาะจงเช่นเดียวกับใน

¹มันมีความซับซ้อนขึ้นเล็กน้อยโดยการรวมตัวอักขระ unicode ที่หลบหนี (ซึ่งไม่มีใครใช้)

²โปรดทราบว่าตามไวยากรณ์ที่ฉันเชื่อมโยงกฎที่เริ่มต้นด้วยยัติภังค์สองอย่างเช่น--indent1ไม่ถูกต้อง อย่างไรก็ตามฉันค่อนข้างแน่ใจว่าฉันได้เห็นสิ่งนี้ในทางปฏิบัติ

— สมุดเขียนบันทึกที่มีอยู่ 3 แผ่นที่ปิดพับเข้าด้วยกัน
แหล่งที่มา

57

หมายเหตุ: W3C บอกว่าควรใช้สงวน '-' หรือ '_' นำหน้าสำหรับส่วนขยาย CSS เฉพาะผู้จำหน่าย (เช่นคลาส -moz * ที่ใช้โดยเบราว์เซอร์ Mozilla)

— mipadi

3

โดยทั่วไปแล้ว \ -escapes จะใช้กันทั่วไป แต่ส่วนใหญ่ใช้เพื่อจุดประสงค์ในการแฮ็ก CSS โดยแยกเบราว์เซอร์ที่ไม่รองรับ

— bobince

5

หากต้องการอัปเดตความคิดเห็นของ @Pim Jager ในอีกสองปีต่อมาตามที่w3counter.com/globalstats.php IE6 มีผู้ใช้งานน้อยกว่า 3% ของผู้ใช้หลัง IE9 ใน 4%, IE7 ที่ 9%, IE8 ที่ 22% Firefox ทุกรุ่นมี 28%, Chrome ทุกรุ่นมี 17%

— Daniel Earwicker

3

ฉันรู้ว่านี่เป็นคำตอบเก่า แต่ CSS (อย่างน้อย 2+) อนุญาตให้ใช้อักขระ {Non-ASCII}ในตัวระบุ

— 2864740

11

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"

. ดังนั้น - --indent1ไม่ถูกต้องและต้องมีการหลบหนีในฐานะ\--indent1( เช่นการ--แบ่งคลาสบน iOS)

— eithed

177

ฉันประหลาดใจที่คำตอบส่วนใหญ่ที่นี่ผิด ปรากฎว่า:

อักขระใด ๆ ยกเว้น NUL ได้รับอนุญาตในชื่อคลาส CSS ใน CSS (หาก CSS มี NUL (หนีออกมาหรือไม่) ผลลัพธ์จะไม่ถูกกำหนด [ CSS-characters ])

ลิงก์คำตอบของ Mathias Bynensไปยังคำอธิบายและการสาธิตที่แสดงวิธีใช้ชื่อเหล่านี้ เขียนลงในรหัส CSS ชื่อคลาสอาจต้องการการหลบหนีแต่นั่นไม่ได้เปลี่ยนชื่อคลาส เช่นการนำเสนอที่มีค่าเกินที่ไม่จำเป็นจะมีลักษณะแตกต่างจากชื่ออื่น ๆ ของชื่อนั้น แต่ก็ยังอ้างถึงชื่อคลาสเดียวกัน

ภาษาอื่น ๆ (การเขียนโปรแกรม) ส่วนใหญ่ไม่มีแนวคิดของการหลีกเลี่ยงชื่อตัวแปร (“ ตัวระบุ”) ดังนั้นการแสดงตัวแปรทั้งหมดจะต้องเหมือนกัน นี่ไม่ใช่กรณีใน CSS

โปรดทราบว่าใน HTML ไม่มีวิธีรวมอักขระเว้นวรรค (ช่องว่างแท็บฟีดบรรทัดฟีดฟอร์มและการขึ้นบรรทัดใหม่)ในแอตทริบิวต์ชื่อคลาสเนื่องจากมีการแยกคลาสออกจากกัน

ดังนั้นหากคุณต้องการเปลี่ยนสตริงแบบสุ่มให้เป็นชื่อคลาส CSS: ดูแล NUL และเว้นวรรคและยกเว้น (ตามสำหรับ CSS หรือ HTML) เสร็จสิ้น

— Robert Siemer
แหล่งที่มา

7

บรรทัดแรกของคำตอบของคุณควรเป็น "คำตอบส่วนใหญ่ที่นี่ล้าสมัย / ใช้กับ CSS2 เท่านั้น"

— Salman

7

@SalmanA คำตอบที่ฉันอ้างถึงผิดตั้งแต่ต้น ไม่สามารถใช้กับ CSS2.1, CSS2 หรือ CSS1

— Robert Siemer

จุดที่ดี @RobertSiemer ฉันย้ายความคิดเห็นของฉันที่จะstackoverflow.com/questions/50812118/... (ซึ่งไม่เคยที่เกี่ยวข้องน้อยกับหัวข้อนี้)

— ปีเตอร์ตัน

และการใช้งาน JavaScript: github.com/mathiasbynens/CSS.escape/blob/master/css.escape.js

— Duarte Cunha Leão

71

ฉันได้ตอบคำถามของคุณในเชิงลึกที่นี่: http://mathiasbynens.be/notes/css-escapes

บทความนี้ยังอธิบายถึงวิธีการหลบหนีตัวละครใด ๆ ใน CSS (และ JavaScript) และฉันได้ทำเครื่องมือที่มีประโยชน์สำหรับเรื่องนี้เช่นกัน จากหน้านั้น:

หากคุณต้องให้องค์ประกอบเป็นค่า ID ของ~!@$%^&*()_+-=,./';:"?><[]{}|`#ตัวเลือกจะมีลักษณะดังนี้:

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

— งัด Bynens
แหล่งที่มา

4

@Darryl แน่นอนว่านี่เป็นตัวอย่างที่ดีมาก แต่สิ่งที่ชอบclass="404-error"มีประโยชน์

— งัด Bynens

ฉันมีตัวอย่าง: ฉันแปลงไวยากรณ์ที่เน้นผลลัพธ์ของระบบเป็น CSS มันมีชื่อชั้นเช่น“ ISO C ++: ประเภท ( _t / _type)” ถ้าฉันเพียงแทนที่ช่องว่างที่ฉันมีชื่อชั้นที่ถูกต้อง

— แกะบิน

ในเว็บไซต์ของคุณคุณบอกว่าอักขระช่องว่างสามารถถูกแบ็กสแลชได้ เมื่อฉันลองใช้ชื่อคลาสฉันไม่สามารถใช้งานได้ ฉันสังเกตเห็นว่าไม่มีพื้นที่ในตัวอย่างนี้ เป็นไปได้ไหม?

— Adamarla

@Adamarla <p class="foo bar">เพิ่มสองชั้นกับpองค์ประกอบ: และfoo barไม่มีทาง (ที่ฉันนึกได้) ในการเพิ่ม classname ที่มีช่องว่างในองค์ประกอบ HTML ข้อมูลเกี่ยวกับวิธียกเว้นอักขระช่องว่างเนื่องจากมีประโยชน์ในการหลีกเลี่ยงอักขระดังกล่าวในบริบทตัวระบุอื่น ๆ เช่นชื่อตระกูลแบบอักษร

— งัด Bynens

3

เช่นเดียวกับสิ่งต่างๆในชีวิตดูเหมือนว่าใน CSS ที่มีความแตกต่างระหว่าง "เทคนิคทางกฎหมายกับสุดขีด" และ "สติ"

— Volksman

69

อ่านข้อมูลจำเพาะ W3C (นี่คือ CSS 2.1 ค้นหารุ่นที่เหมาะสมสำหรับข้อสันนิษฐานของเบราว์เซอร์ของคุณ)

แก้ไข: ย่อหน้าที่เกี่ยวข้องดังต่อไปนี้:

ใน CSS ตัวระบุ (รวมถึงชื่อองค์ประกอบคลาสและรหัสในตัวเลือก) สามารถมีได้เฉพาะอักขระ [a-z0-9] และ ISO 10646 ตัวอักษร U + 00A1 และสูงกว่ารวมถึงเครื่องหมายขีดกลาง (-) และเครื่องหมายขีดล่าง (_) ; พวกเขาไม่สามารถเริ่มต้นด้วยตัวเลขหรือยัติภังค์ตามด้วยตัวเลข ตัวระบุสามารถมีอักขระที่ใช้ Escape และตัวอักษร ISO 10646 เป็นรหัสตัวเลขได้ (ดูรายการถัดไป) ตัวอย่างเช่นตัวระบุ "B&W?" อาจเขียนเป็น "B \ & W \?" หรือ "B \ 26 W \ 3F"

แก้ไข 2: @mipadi ชี้ให้เห็นในคำตอบของ Triptych มีคำเตือนนี้อยู่ในหน้าเว็บเดียวกัน:

ใน CSS ตัวระบุอาจเริ่มต้นด้วย '-' (เส้นประ) หรือ '_' (ขีดล่าง) คำหลักและชื่อคุณสมบัติที่ขึ้นต้นด้วย '-' หรือ '_' ถูกสงวนไว้สำหรับส่วนขยายเฉพาะของผู้ขาย ส่วนขยายเฉพาะผู้ขายดังกล่าวควรมีหนึ่งในรูปแบบต่อไปนี้:
'-' + vendor identifier + '-' + meaningful name 
'_' + vendor identifier + '-' + meaningful name
ตัวอย่าง):

ตัวอย่างเช่นหากองค์กร XYZ เพิ่มคุณสมบัติเพื่ออธิบายสีของเส้นขอบที่ด้านตะวันออกของจอแสดงผลพวกเขาอาจเรียกมันว่า -xyz-border-east-color

ตัวอย่างอื่น ๆ ที่รู้จักกัน:
 -moz-box-sizing
 -moz-border-radius
 -wap-accesskey
ไม่รับประกันว่าจะมีเครื่องหมายขีดกลางหรือเครื่องหมายขีดล่างหรือขีดล่างเริ่มต้นในพร็อพเพอร์ตี้หรือคำหลักโดยระดับ CSS ปัจจุบันหรืออนาคต ดังนั้นการใช้งาน CSS ทั่วไปอาจไม่รู้จักคุณสมบัติดังกล่าวและอาจเพิกเฉยต่อพวกเขาตามกฎสำหรับการจัดการข้อผิดพลาดในการแยกวิเคราะห์ อย่างไรก็ตามเนื่องจากขีดกลางเริ่มต้นหรือขีดล่างเป็นส่วนหนึ่งของไวยากรณ์ผู้ใช้ CSS 2.1 ควรใช้ parser ที่สอดคล้องกับ CSS เสมอไม่ว่าจะสนับสนุนส่วนขยายเฉพาะผู้ขายหรือไม่ก็ตาม

ผู้เขียนควรหลีกเลี่ยงส่วนขยายเฉพาะของผู้ขาย

— เจสันเอส
แหล่งที่มา

ฉันหมายถึงการแก้ไขครั้งที่สองของคุณเกี่ยวกับเครื่องหมายขีดกลางและขีดล่าง แต่ลืมที่จะอธิบายให้ชัดเจน ขอโทษสำหรับความสับสน.

— Albin

24

นิพจน์ทั่วไปที่สมบูรณ์คือ:

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

ดังนั้นจึงไม่อนุญาตให้ใช้อักขระที่ปรากฏในรายการทั้งหมดยกเว้น“ -” และ“ _” หากใช้โดยตรง แต่คุณสามารถเข้ารหัสโดยใช้เครื่องหมายหรือใช้สัญกรณ์ของfoo\~bar UNICODEfoo\7E bar

— ต้นกระเจี๊ยบ
แหล่งที่มา

ทำไม[\200-\377]? [\178-\1114112]ได้รับอนุญาต unescaped ใน CSS 3

— Flying sheep

\377ที่นี่ผิดจริง มีข้อความในส่วนของ Lexical Scanner ของไวยากรณ์ของ CSS2.1 ซึ่งระบุว่า: "The" \ 377 "หมายถึงหมายเลขตัวอักษรสูงสุดที่ Flex เวอร์ชันปัจจุบันสามารถจัดการได้ (ทศนิยม 255) ควรอ่านเป็น" \ 4177777 "( ทศนิยม 1114111) ซึ่งเป็นจุดรหัสที่เป็นไปได้สูงสุดใน Unicode / ISO-10646 " นอกจากนี้ยังควรจะมาจากเช่นกันไม่ได้\240 \377ฉันเดาว่านี่คืออายุ 7 ปีแล้วดังนั้นสิ่งต่างๆอาจมีการเปลี่ยนแปลงเล็กน้อยตั้งแต่นั้นมา

— James Donnelly

1

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

2

@JamesDonnelly โปรดแก้ไขคำตอบของฉันหากคุณคิดว่าจำเป็นต้องได้รับการอัปเดต

— Gumbo

11

สำหรับผู้ที่กำลังมองหาวิธีแก้ปัญหาคุณสามารถใช้ตัวเลือกแอททริบิวต์เช่นถ้าคลาสของคุณเริ่มต้นด้วยตัวเลข เปลี่ยนแปลง:

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

สำหรับสิ่งนี้:

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

นอกจากนี้หากมีหลายคลาสคุณจะต้องระบุในตัวเลือกที่ฉันคิด

แหล่งที่มา:

— D.Tate
แหล่งที่มา

5

ความเข้าใจของฉันคือการขีดเส้นใต้มีเหตุผลทางเทคนิค เช็คเอาท์:

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

"... errata ไปยังข้อมูลจำเพาะที่เผยแพร่ในต้นปี 2544 ทำให้ขีดกฎหมายเป็นครั้งแรก"

บทความที่กล่าวถึงข้างต้นบอกว่าไม่เคยใช้มันจากนั้นให้รายชื่อของเบราว์เซอร์ที่ไม่สนับสนุนพวกเขาซึ่งทั้งหมดนี้เป็นตัวเลขของผู้ใช้อย่างน้อยที่สุดมีความยาวซ้ำซ้อน

— mofaha
แหล่งที่มา

4

สำหรับคลาส HTML5 / CSS3 และรหัสสามารถเริ่มต้นด้วยตัวเลข

— Marius
แหล่งที่มา

1

คุณมีแหล่งที่มาสำหรับสิ่งนี้หรือไม่? บางทีฉันอาจขาดอะไรบางอย่าง แต่CSS3 selectors specเชื่อมโยงไปยังข้อกำหนดตัวระบุในสเปค CSS 2.1 ซึ่งไม่อนุญาตให้ใช้หมายเลขนำหน้า

— Ryan

11

w3.org/TR/2003/WD-css3-syntax-20030813/#characters <- ยังไม่อนุญาตให้ใช้หมายเลขนำหน้า ฯลฯ (แม้ว่าจะใช้งานได้)

— Jamie Pate

10

HTML 5 อนุญาตให้คลาสและรหัสเริ่มต้นด้วยตัวเลข (เช่นclass="1a") อย่างไรก็ตามตัวระบุ CSS ไม่สามารถเริ่มต้นด้วยตัวเลข (เช่น.1aจะไม่ทำงาน) คุณสามารถหลบหนีได้ยาก (เช่น.\31 aหรือ.\000031a)

— Oriol

แม้ว่าโดยปกติจะใช้งานใน CSS ด้วย แต่ดูเหมือนว่ายังไม่เป็นทางการ "ชื่อคุณสมบัติและชื่อกฎเป็นตัวระบุเสมอซึ่งจะต้องเริ่มต้นด้วยตัวอักษรหรือยัติภังค์ตามด้วยตัวอักษรและจากนั้นสามารถมีตัวอักษรตัวเลขยัติภังค์หรือขีดล่าง" - w3.org/TR/css3-syntax/#syntax-description

— สติกเกอร์

@Pangloss แต่ชื่อคลาสไม่ใช่ชื่อคุณสมบัติหรือชื่อกฎ

— Bennett McElwee

1

ออกไปจากคำตอบของ @ Triptych คุณสามารถใช้ 2 regex ต่อไปนี้เพื่อให้สตริงถูกต้อง:

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

นี่คือการจับคู่แบบย้อนกลับที่เลือกสิ่งใดก็ตามที่ไม่ใช่ตัวอักษรตัวเลขขีดกลางหรือขีดล่างเพื่อให้นำออกได้ง่าย

^-*[0-9]+

สิ่งนี้ตรงกับ 0 หรือ 1 ขีดกลางตามด้วยตัวเลข 1 ตัวหรือมากกว่าที่จุดเริ่มต้นของสตริงรวมถึงเพื่อการลบออกได้ง่าย

ฉันจะใช้ใน 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 : '';

— Manny Fleurmond
แหล่งที่มา