ค่าที่ถูกต้องสำหรับแอตทริบิวต์ id ใน HTML คืออะไร


2015

เมื่อสร้างidคุณลักษณะสำหรับองค์ประกอบ HTML กฎใดที่มีสำหรับค่า


96
สิ่งนี้แตกต่างกันระหว่าง HTML5 และรุ่นก่อนหน้าของข้อมูลจำเพาะ ฉันอธิบายที่นี่: mathiasbynens.be/notes/html5-id-class
Mathias Bynens

5
ฉันสังเกตเห็น SharePoint 2010 กำหนดค่าเช่นนี้ - {8CC7EF38-31D8-4786-8C20-7E6D56E49AE2} - {E60CE5E2-6E64-4350-A884-654B72DA5A53 ที่สร้างขึ้นแบบไดนามิกภายใน Web Part & หน้าเว็บที่มีค่า ID ของ การเรียงลำดับดังกล่าวไม่ได้ทำลายในเบราว์เซอร์ยอดนิยมใด ๆ การจัดการกับค่า ID ดังกล่าวผ่าน JavaScript นั้นค่อนข้างยุ่งยาก - mvark.blogspot.in/2012/07/…
mvark

3
ข้อกำหนด HTML4 และ HTML5 สำหรับIDค่าแตกต่างกันมาก นี่เป็นบทสรุปที่สมบูรณ์และรวดเร็วของIDกฎHTML5 : stackoverflow.com/a/31773673/3597276
Michael Benjamin

5
โปรดทราบ: การทำตามคำตอบบางคำได้กล่าวไว้และใช้เครื่องหมายจุด ( **.**)ด้วย jQuery จะทำให้คุณมีปัญหานิดหน่อยตัวอย่างเช่นการใช้<input id="me.name" />แล้ว$("#me.name").val()จะทำให้ jQuery ค้นหา<me>แท็กที่มีคลาส.nameซึ่งไม่มีใครต้องการ จริงๆ!
สามารถ O 'สแปม

3
@SamSwift 웃 Nope คุณก็จะต้องหลบหนีตัวอักษรพิเศษเป็นเอกสารกล่าวว่า โปรดตรวจสอบตัวอย่างออนไลน์นี้
ÁlvaroGonzález

คำตอบ:


1702

สำหรับHTML 4คำตอบนั้นเป็นเทคนิค:

โทเค็น ID และ NAME ต้องขึ้นต้นด้วยตัวอักษร ([A-Za-z]) และอาจตามด้วยตัวอักษรตัวเลข ([0-9]), ขีดกลาง ("-"), ขีดล่าง ("_") , colons (":") และเครื่องหมายมหัพภาค (".")

HTML 5นั้นอนุญาตได้มากกว่านี้โดยบอกว่า id ต้องมีอักขระอย่างน้อยหนึ่งตัวและอาจไม่มีอักขระเว้นวรรค

แอตทริบิวต์ ID เป็นกรณีที่สำคัญในXHTML

คุณอาจต้องการหลีกเลี่ยงตัวละครบางตัว งวดทวิภาคและ '#' มีความหมายพิเศษในตัวเลือก CSS ดังนั้นคุณจะต้องหลบหนีตัวอักษรเหล่านั้นใช้ทับขวาใน CSSหรือเครื่องหมายคู่ในสตริงเลือกส่งผ่านไปยัง jQuery คิดเกี่ยวกับความถี่ที่คุณจะต้องหลบหนีตัวละครในสไตล์หรือรหัสของคุณก่อนที่คุณจะคลั่งไคล้กับเครื่องหมายจุดและเครื่องหมายทวิภาคในรหัส

ตัวอย่างเช่นการประกาศ HTML <div id="first.name"></div>นั้นถูกต้อง คุณสามารถเลือกองค์ประกอบนั้นใน CSS เป็น#first\.nameและใน jQuery ดังนี้: $('#first\\.name').แต่ถ้าคุณลืมเครื่องหมายแบ็กสแลช$('#first.name')คุณจะมีตัวเลือกที่ถูกต้องสมบูรณ์แบบที่กำลังมองหาองค์ประกอบที่มี ID firstและยังมีคลาสnameด้วย นี่เป็นข้อผิดพลาดที่มองข้ามได้ง่าย คุณอาจจะมีความสุขในระยะยาวการเลือก ID first-name(ยัติภังค์มากกว่าระยะเวลา) แทน

คุณสามารถทำให้ภารกิจการพัฒนาของคุณง่ายขึ้นโดยยึดหลักการการตั้งชื่ออย่างเคร่งครัด ตัวอย่างเช่นหากคุณ จำกัด ตัวคุณเองให้เหลือเพียงตัวอักษรตัวเล็กและแยกคำด้วยเครื่องหมายยัติภังค์หรือขีดล่างเสมอ (แต่ไม่ใช่ทั้งคู่ให้เลือกคำใดคำหนึ่งและไม่ใช้อักขระอื่น) คุณจะมีรูปแบบที่จำง่าย คุณจะไม่มีวันสงสัยว่า "มันเป็นfirstNameหรือFirstName" first_nameเพราะคุณจะรู้ว่าคุณควรจะพิมพ์ ชอบอูฐใช่ไหม จากนั้น จำกัด ตัวเองไว้ที่เครื่องหมายขีดคั่นหรือขีดล่างและใช้ตัวพิมพ์เล็กหรือตัวพิมพ์เล็กสำหรับอักขระตัวแรกอย่างสม่ำเสมออย่าผสมกัน


ปัญหาที่คลุมเครือมากในขณะนี้คืออย่างน้อยหนึ่งเบราว์เซอร์ Netscape 6 ซึ่งถือว่าค่าแอตทริบิวต์ id ไม่ถูกต้องตามตัวพิมพ์ใหญ่ -เล็ก นั่นหมายความว่าหากคุณพิมพ์id="firstName"HTML ของคุณ (ตัวพิมพ์เล็ก 'f') และ#FirstName { color: red }ใน CSS (ตัวพิมพ์ใหญ่ 'F') เบราว์เซอร์ buggy นั้นจะล้มเหลวในการตั้งค่าสีขององค์ประกอบเป็นสีแดง ในช่วงเวลาของการแก้ไขนี้เมษายน 2558 ฉันหวังว่าคุณจะไม่ถูกขอให้สนับสนุน Netscape 6 พิจารณาเชิงอรรถนี้


78
โปรดทราบว่าแอตทริบิวต์ class และ id จะคำนึงถึงตัวอักษรใหญ่และเล็กใน XHTML คุณลักษณะอื่น ๆ ทั้งหมดนั้นไม่ได้เป็นเช่นนั้น Eric Meyer พูดถึงเรื่องนี้ใน CSS workshop ที่ฉันเข้าร่วม
John Topley

31
โปรดทราบด้วยว่าหากคุณพยายามเขียนกฎ CSS เพื่อกำหนดเป้าหมายองค์ประกอบตาม ID และ ID ของสิ่งมีชีวิตที่มีตัวเลขมันจะไม่ทำงาน แย่จัง!
Zack The Human

55
ส่วน '.' หรือ ':' ใน ID ที่ใช้ jQuery, jQuery ดูคำถามที่พบบ่อย มันมีฟังก์ชั่นขนาดเล็กที่จะหลบหนีที่จำเป็น
Wolfram

7
idแอตทริบิวต์ [ w3.org/TR/html4/struct/global.html#adef-id](caseที่มีความสำคัญใน HTML4) และมีการเริ่มต้นด้วยตัวอักษร ( จำกัด A ถึง Z) นอกจากนี้ทราบว่าตัวอย่างของคุณไม่ควรทำสีข้อความองค์ประกอบของสีแดงตั้งแต่ CSS ของคุณหมายถึงองค์ประกอบที่มีระดับไม่ให้คุณFirstName id
Augustus Kling

5
ข้อผิดพลาดที่ออกัสตัสชี้ให้เห็นยังคงมีอยู่ ในตัวอย่างของคุณหากคุณมีid="firstName"ทั้ง HTML 4 หรือ HTML 5 และ#FirstName { color: red }ใน CSS เบราว์เซอร์ buggy เท่านั้นที่จะตั้งค่าสีขององค์ประกอบเป็นสีแดง
Stephen Booher

221

จากข้อกำหนดของHTML 4 :

โทเค็น ID และ NAME ต้องขึ้นต้นด้วยตัวอักษร ([A-Za-z]) และอาจตามด้วยตัวอักษรตัวเลข ([0-9]), ขีดกลาง ("-"), ขีดล่าง ("_") , colons (":") และเครื่องหมายมหัพภาค (".")

ข้อผิดพลาดทั่วไปคือการใช้ ID ที่เริ่มต้นด้วยหลัก


20
โปรดทราบว่า HTML5 อนุญาตให้มากกว่านั้น HTML4 ดูตัวอย่าง456bereastreet.com/archive/201011/ …และw3.org/TR/html5/elements.html#the-id-attribute
Mr Shark

IE6 ไม่รองรับ ID ที่เริ่มต้นด้วยเครื่องหมายขีดล่าง แต่มันยังไม่ตาย
doc_id

2
@rahmanisback เกี่ยวกับ IE6 คงคิดเช่นนั้น แต่ตอนนี้ฉันกำลังทำข้อเสนอสำหรับธนาคารและพวกเขายืนยันว่าแอปพลิเคชันใด ๆ ที่ผู้ขายพัฒนาขึ้นมาทำงานใน IE6 สำหรับผู้ใช้ 30,000 ราย ถ้าเราแค่ให้พวกเขาอัพเดทเบราว์เซอร์บนเดสก์ท็อปเหล่านั้นทั้งหมดมันก็อาจช่วยให้อัตราการว่างงาน
Karl

2
@Karl ฉันเสียใจที่ได้ยินเรื่องนี้ พยายามอย่างเต็มที่ที่จะเตือนเกี่ยวกับปัญหาด้านความปลอดภัยของ IE6 อย่างไรก็ตาม IE7 จะเป็น IE6 ใหม่ในไม่ช้าดังนั้นใช่ว่ามันจะเป็นชะตากรรมของเราในอุตสาหกรรมนี้ที่จะแก้ไขข้อผิดพลาดในอดีตของ MS
doc_id

@MrShark ลิงก์ที่สองเสีย ลิงก์ใหม่
SWdV

155

ในทางเทคนิคคุณสามารถใช้เครื่องหมายจุดคู่และเครื่องหมายจุดในแอตทริบิวต์ id / name แต่ฉันขอแนะนำให้หลีกเลี่ยงทั้งสองอย่าง

ใน CSS (และไลบรารี JavaScript หลายแห่งเช่น jQuery) ทั้งช่วงเวลาและเครื่องหมายโคลอนจะมีความหมายพิเศษและคุณจะพบปัญหาหากคุณไม่ระวัง คาบคือตัวเลือกคลาสและโคลอนเป็นตัวเลือกหลอก (เช่น. ": hover" สำหรับองค์ประกอบเมื่อเมาส์อยู่เหนือจุดนั้น)

หากคุณให้องค์ประกอบ id "my.cool: ทุกอย่าง" ตัวเลือก CSS ของคุณจะมีลักษณะดังนี้:

#my.cool:thing { ... /* some rules */ ... }

ซึ่งเป็นการพูดจริง ๆ ว่า "องค์ประกอบที่มี id ของ 'my' คลาส 'cool' และ 'thing' pseudo-selector" ใน CSS-speak

ติดกับ AZ ทุกกรณีตัวเลขขีดเส้นใต้และเครื่องหมายขีดกลาง และตามที่กล่าวไว้ข้างต้นตรวจสอบให้แน่ใจว่ารหัสประจำตัวของคุณไม่ซ้ำใคร

นั่นควรเป็นข้อกังวลแรกของคุณ


21
คุณสามารถใช้เครื่องหมายจุดคู่และจุด - แต่คุณจะต้องหลบหนีโดยใช้เครื่องหมายแบ็กสแลชสองครั้งเช่น: $ ('# my \\. cool \\: things') หรือหนีตัวแปร: $ ('#' + id.replace (/ \ ./, '\\.'). แทนที่ (/ \: /, '\\:')) groups.google.com/group/jquery-en/browse_thread/thread/…
joeformd

2
ทำไมไม่เป็นตัวเลข ทำไมต้องเป็น AZ ตัวเลขเป็น ID ที่มีประโยชน์มากเมื่ออ้างถึงองค์ประกอบที่เกี่ยวข้องกับข้อมูลที่มีการใส่ตัวเลขตราบใดที่คุณไม่ได้ขึ้นต้นด้วยตัวเลข
Cori

4
เพียงแค่ FYI เครื่องหมายขีดคั่นเป็นเครื่องหมายขีดคั่นทางเทคนิค เครื่องหมายลบไม่อยู่ในชุดอักขระ ASCII en.wikipedia.org/wiki/Plus_and_minus_signs#Character_codes
Anton Strogonoff

4
หากคุณมีอักขระเหล่านี้ ( ., :) ในรหัสและไม่สามารถลบออกได้ (ไอ ... Sharepoint) คุณสามารถแก้ไขได้ใน CSS ที่มีตัวเลือกคุณลักษณะแทนตัวเลือกรหัสเช่น[id='my.cool:thing']ตัวเลือกนี้จะมีความจำเพาะต่ำกว่า id selector ซึ่งอาจทำให้เกิดปัญหาอื่น ๆ
เฟาสต์

2
เก่าฉันรู้ แต่อัปเดตเพื่อรวมตัวเลขและ backpedal บนยัติภังค์
Michael Thompson

67

jQuery ไม่จัดการชื่อ ID ที่ถูกต้อง คุณเพียง แต่ต้องหลบหนีเมตาเบรเตอร์ (เช่นจุดเซมิโคลอนวงเล็บเหลี่ยม ... ) มันเหมือนกับว่า JavaScript มีปัญหากับราคาเพียงเพราะคุณไม่สามารถเขียน

var name = 'O'Hara';

Selectors ใน jQuery API (ดูหมายเหตุด้านล่าง)


66

ควรจับคู่อย่างเคร่งครัด

[A-Za-z][-A-Za-z0-9_:.]*

แต่ jquery ดูเหมือนจะมีปัญหากับ colons ดังนั้นจึงเป็นการดีกว่าที่จะหลีกเลี่ยง


2
หรืออีกวิธีหนึ่ง: "ดังนั้นจึงเป็นการดีกว่าที่จะหลีกเลี่ยง jquery" ;)
domsson

59

HTML5:

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

  1. ค่าต้องมีอักขระอย่างน้อยหนึ่งตัว (ต้องไม่ว่างเปล่า)
  2. ไม่สามารถมีอักขระเว้นวรรคได้

PRE-HTML5:

ID ควรตรงกัน:

[A-Za-z][-A-Za-z0-9_:.]*
  1. ต้องเริ่มต้นด้วยตัวอักษร AZ หรือ az
  2. อาจมี-(ยัติภังค์), _(ขีดล่าง), :(โคลอน) และ.(จุด)

แต่หนึ่งควรหลีกเลี่ยง:และเป็น.สาเหตุ:

ตัวอย่างเช่น ID อาจมีป้ายกำกับ "ab: c" และอ้างอิงในสไตล์ชีตเป็น #ab: c แต่เช่นเดียวกับการเป็น id สำหรับองค์ประกอบมันอาจหมายถึง id "a", class "b", pseudo- ตัวเลือก "c" ดีที่สุดเพื่อหลีกเลี่ยงความสับสนและอยู่ห่างจากการใช้ และ: ทั้งหมด


57

HTML5: ค่าที่อนุญาตสำหรับ ID และแอตทริบิวต์ของคลาส

ในฐานะของ HTML5 ข้อ จำกัด เพียงอย่างเดียวของค่าของ ID คือ:

  1. จะต้องไม่ซ้ำกันในเอกสาร
  2. ต้องไม่มีอักขระเว้นวรรค
  3. ต้องมีอักขระอย่างน้อยหนึ่งตัว

กฎที่คล้ายกันนำไปใช้กับชั้นเรียน (ยกเว้นสำหรับเอกลักษณ์ของหลักสูตร)

ดังนั้นค่าสามารถเป็นตัวเลขทั้งหมดเพียงหนึ่งหลักตัวอักษรเครื่องหมายวรรคตอนรวมถึงอักขระพิเศษ เพียงแค่ไม่มีช่องว่าง สิ่งนี้แตกต่างจาก HTML4 มาก

ใน HTML 4 ค่า ID ต้องเริ่มต้นด้วยตัวอักษรซึ่งสามารถตามด้วยตัวอักษรตัวเลขยัติภังค์ขีดล่างเครื่องหมายจุดคู่และจุด

ใน HTML5 สิ่งเหล่านี้ใช้ได้:

<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

เพียงจำไว้ว่าการใช้ตัวเลขเครื่องหมายวรรคตอนหรืออักขระพิเศษในมูลค่าของ ID อาจทำให้เกิดปัญหาในบริบทอื่น ๆ (เช่น CSS, JavaScript, regex)

ตัวอย่างเช่น ID ต่อไปนี้ถูกต้องใน HTML5:

<div id="9lions"> ... </div>

อย่างไรก็ตามมันไม่ถูกต้องใน CSS:

จากสเปค CSS2.1:

4.1.3 ตัวละครและกรณี

ใน CSS ตัวระบุ (รวมถึงชื่อองค์ประกอบคลาสและรหัสในตัวเลือก) สามารถมีได้เฉพาะอักขระ [a-zA-Z0-9] และ ISO 10646 ตัวอักษร U + 00A0 และสูงกว่ารวมถึงเครื่องหมายขีดกลาง (-) และขีดล่าง ( _); พวกเขาไม่สามารถเริ่มต้นด้วยหลักสองยัติภังค์หรือยัติภังค์ตามหลัก

ในกรณีส่วนใหญ่คุณอาจสามารถหลบหนีอักขระในบริบทที่มีข้อ จำกัด หรือความหมายพิเศษ


การอ้างอิง W3C

HTML5

3.2.5.1 id คุณลักษณะ

idแอตทริบิวต์ระบุองค์ประกอบของมันบ่งชี้เฉพาะ (ID)

ค่าจะต้องไม่ซ้ำกันในหมู่ ID ทั้งหมดในทรีย่อยขององค์ประกอบและต้องมีอักขระอย่างน้อยหนึ่งตัว ค่าต้องไม่มีอักขระช่องว่างใด ๆ

หมายเหตุ: ไม่มีข้อ จำกัด อื่น ๆ เกี่ยวกับรูปแบบที่ ID สามารถใช้ โดยเฉพาะ ID อาจประกอบด้วยตัวเลขเพียงหลักเริ่มต้นด้วยตัวเลขเริ่มต้นด้วยเครื่องหมายขีดล่างประกอบด้วยเครื่องหมายวรรคตอนเป็นต้น

3.2.5.7 class คุณลักษณะ

แอ็ตทริบิวต์หากระบุต้องมีค่าที่เป็นชุดของโทเค็นที่คั่นด้วยช่องว่างซึ่งเป็นตัวแทนของคลาสต่างๆที่องค์ประกอบนั้นเป็นเจ้าของ

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

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


34

ในทางปฏิบัติไซต์จำนวนมากใช้idแอตทริบิวต์ที่ขึ้นต้นด้วยตัวเลขแม้ว่าเทคนิคนี้จะไม่ใช่ HTML ที่ถูกต้องก็ตาม

ข้อกำหนดคุณลักษณะแบบร่าง HTML 5คลายกฎสำหรับidและnameแอตทริบิวต์: ตอนนี้เป็นเพียงสตริงทึบแสงที่ไม่สามารถมีช่องว่างได้


32

ยัติภังค์, ขีดล่าง, จุด, colons, ตัวเลขและตัวอักษรทั้งหมดนี้ใช้ได้กับ CSS และ JQuery ต่อไปนี้ควรใช้งานได้ แต่ต้องไม่ซ้ำกันทั่วทั้งหน้าและต้องเริ่มต้นด้วยตัวอักษร [A-Za-z]

การทำงานกับ colons และมหัพภาคจำเป็นต้องใช้เวลาทำงานอีกเล็กน้อย แต่คุณสามารถทำได้ตามตัวอย่างต่อไปนี้

<html>
<head>
<title>Cake</title>
<style type="text/css">
    #i\.Really\.Like\.Cake {
        color: green;
    }
    #i\:Really\:Like\:Cake {
        color: blue;
    }
</style>
</head>
<body>
    <div id="i.Really.Like.Cake">Cake</div>
    <div id="testResultPeriod"></div>

    <div id="i:Really:Like:Cake">Cake</div>
    <div id="testResultColon"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var testPeriod = $("#i\\.Really\\.Like\\.Cake");
            $("#testResultPeriod").html("found " + testPeriod.length + " result.");

            var testColon = $("#i\\:Really\\:Like\\:Cake");
            $("#testResultColon").html("found " + testColon.length + " result.");
        });
    </script>
</body>
</html>

25

HTML5

โปรดทราบว่า ID ต้องไม่ซ้ำกันเช่น ต้องไม่มีองค์ประกอบหลายรายการในเอกสารที่มีค่ารหัสเดียวกัน

กฎเกี่ยวกับเนื้อหา ID ใน HTML5 คือ (นอกเหนือจากการไม่ซ้ำกัน):

This attribute's value must not contain white spaces. [...] 
Though this restriction has been lifted in HTML 5, 
an ID should start with a letter for compatibility.

นี่คือสเป็คW3เกี่ยวกับ ID (från MDN):

Any string, with the following restrictions:
must be at least one character long
must not contain any space characters
Previous versions of HTML placed greater restrictions on the content of ID values 
(for example, they did not permit ID values to begin with a number).

ข้อมูลเพิ่มเติม:

  • W3 - คุณสมบัติระดับโลก (id)
  • MDN atribute (id)

18

ในการอ้างอิง id ที่มีจุดอยู่คุณต้องใช้แบ็กสแลช ไม่แน่ใจว่ามันเหมือนกันสำหรับยัติภังค์หรือขีดล่าง ตัวอย่างเช่น: HTML

<div id="maintenance.instrumentNumber">############0218</div>

CSS

#maintenance\.instrumentNumber{word-wrap:break-word;}

3
ยัติภังค์และขีดล่างไม่จำเป็นต้องหลบหนี อย่างไรก็ตามข้อยกเว้นคือถ้ามีเครื่องหมายยัติภังค์ปรากฏขึ้นที่จุดเริ่มต้นของตัวระบุและตามด้วยยัติภังค์อื่น (เช่น. \--abc) หรือตัวเลข (เช่น. \-123)
MrWhite

16

จากสเป็ค HTML 4 ...

โทเค็น ID และ NAME ต้องขึ้นต้นด้วยตัวอักษร ([A-Za-z]) และอาจตามด้วยตัวอักษรตัวเลข ([0-9]), ขีดกลาง ("-"), ขีดล่าง ("_") , colons (":") และเครื่องหมายมหัพภาค (".")

แก้ไข: d'oh! กดปุ่มอีกครั้ง!


16

นอกจากนี้อย่าลืมว่า ID นั้นไม่เหมือนใคร เมื่อใช้แล้วค่า ID อาจไม่ปรากฏที่ใดก็ได้ในเอกสารอีกครั้ง

คุณอาจมี ID จำนวนมาก แต่ทุกคนต้องมีค่าที่ไม่ซ้ำกัน

ในทางกลับกันก็มีองค์ประกอบคลาส เช่นเดียวกับ ID มันสามารถปรากฏได้หลายครั้ง แต่อาจมีการใช้ค่าซ้ำแล้วซ้ำอีก


12

ตัวระบุที่ไม่ซ้ำกันสำหรับองค์ประกอบ

ต้องไม่มีองค์ประกอบหลายรายการในเอกสารที่มีค่ารหัสเดียวกัน

สตริงใด ๆ ที่มีข้อ จำกัด ดังต่อไปนี้:

  1. ต้องมีอักขระอย่างน้อยหนึ่งตัว
  2. ต้องไม่มีอักขระเว้นวรรค:

    • U + 0020 SPACE
    • ตารางตัวอักษร U + 0009 (แท็บ)
    • ฟีดบรรทัด U + 000A (LF)
    • ป้อนแบบฟอร์ม U + 000C (FF)
    • U + 000D ผลตอบแทนการขนส่ง (CR)

การใช้อักขระยกเว้นอาจทำให้เกิดปัญหาการทำงานร่วมกันเช่นที่พวกเขาไม่ได้รับอนุญาตในASCII letters and digits, '_', '-' and '.' HTML 4แม้ว่าข้อ จำกัด นี้จะถูกยกขึ้นHTML 5แต่ ID ควรเริ่มต้นด้วยตัวอักษรสำหรับความเข้ากันได้


11

ปรากฏว่าแม้ว่า colons (:) และมหัพภาค (.) นั้นถูกต้องในข้อกำหนดของ HTML แต่ก็ไม่ถูกต้องในฐานะตัวเลือก id ในCSSดังนั้นอาจหลีกเลี่ยงได้ดีที่สุดหากคุณตั้งใจจะใช้เพื่อจุดประสงค์นั้น


@MathiasBynens ลิงก์เสีย ตอนนี้ก็คือmothereff.in/css-escapes#0foo%23bar.baz%3Aqux
Oriol

พวกเขาจะไม่ถูกต้องหากคุณหลบหนีอย่างถูกต้อง ดู mothereff.in/css-escapes#0foo%23bar.baz%3Aqux
Mathias Bynens

10

สำหรับ HTML5

ค่าจะต้องไม่ซ้ำกันในหมู่ ID ทั้งหมดในทรีย่อยขององค์ประกอบและต้องมีอักขระอย่างน้อยหนึ่งตัว ค่าต้องไม่มีอักขระช่องว่างใด ๆ

อย่างน้อยหนึ่งตัวอักษรไม่มีช่องว่าง

นี่เป็นการเปิดประตูสำหรับกรณีการใช้ที่ถูกต้องเช่นการใช้อักขระเน้นเสียง มันยังทำให้เรามีกระสุนอีกมากที่จะยิงตัวเราด้วยเพราะตอนนี้คุณสามารถใช้ค่า id ที่จะทำให้เกิดปัญหากับทั้ง CSS และ JavaScript เว้นแต่คุณจะระวังให้ดี


9
  1. ID เหมาะที่สุดสำหรับการตั้งชื่อส่วนต่าง ๆ ของเลย์เอาท์ของคุณดังนั้นไม่ควรให้ชื่อเดียวกันกับ ID และคลาส
  2. ID อนุญาตให้ใช้ตัวอักษรและตัวเลขและอักขระพิเศษ
  3. แต่หลีกเลี่ยงการใช้# : . * !สัญลักษณ์
  4. ไม่อนุญาตช่องว่าง
  5. ไม่ได้เริ่มต้นด้วยตัวเลขหรือเครื่องหมายขีดคั่นตามด้วยตัวเลข
  6. กรณีที่สำคัญ
  7. การใช้ตัวเลือกรหัสจะเร็วกว่าการใช้ตัวเลือกคลาส
  8. ใช้เครื่องหมายขีดคั่น "-" (ขีดล่าง "_" สามารถใช้ แต่ไม่เหมาะสำหรับ seo) สำหรับ CSS คลาสหรือชื่อกฎ Id ที่ยาว
  9. หากกฎมีตัวเลือก ID เป็นตัวเลือกหลักอย่าเพิ่มชื่อแท็กในกฎ เนื่องจาก ID ไม่ซ้ำกันการเพิ่มชื่อแท็กจะทำให้กระบวนการจับคู่ช้าลงโดยไม่จำเป็น
  10. ใน HTML5 สามารถใช้แอตทริบิวต์ id กับองค์ประกอบ HTML ใดก็ได้และใน HTML 4.01 แอตทริบิวต์ id ไม่สามารถใช้กับ: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

"ขีดเส้นใต้สามารถใช้ แต่ไม่ดีสำหรับ seo": ตั้งแต่เมื่อใดที่เสิร์ชเอนจิ้นให้ความสนใจในชื่อคลาส CSS หรือ id
นิคไรซ์

9

ใด ๆAlpha-ตัวเลขค่าและ " - " และ " _ " มีผลบังคับใช้ แต่คุณควรเริ่มต้นชื่อประชาชนได้ด้วยตัวอักษรใด ๆ ระหว่างAZหรือaz



4

ในรูปแบบ HTML

IDควรเริ่มต้นด้วย{AZ}หรือ{az}คุณสามารถเพิ่มตัวเลขระยะเวลายัติภังค์ขีดเส้นใต้ทวิภาค

ตัวอย่างเช่น:

<span id="testID2"></span>
<span id="test-ID2"></span>
<span id="test_ID2"></span>
<span id="test:ID2"></span>
<span id="test.ID2"></span>

แต่แม้ว่าคุณสามารถสร้าง ID ด้วย Colons (:) หรือ period (.) มันยากสำหรับCSS ที่จะใช้ ID เหล่านี้เป็นตัวเลือก ส่วนใหญ่เมื่อคุณต้องการใช้องค์ประกอบ Pseudo (: ก่อน,: หลัง)

นอกจากนี้ในJSมันยากที่จะเลือก ID เหล่านี้ ดังนั้นคุณควรใช้ ID สี่ตัวแรกเป็นที่ต้องการโดยนักพัฒนาหลาย ๆ คนและถ้าจำเป็นมากกว่าที่คุณสามารถใช้สองตัวสุดท้ายได้



2

ตั้งแต่ES2015เราสามารถใช้ - เกือบทุกตัวอักษรยูนิโค้ดสำหรับ ID ได้ถ้าชุดเอกสารถูกตั้งค่าเป็น UTF8

ทดสอบที่นี่: https://mothereff.in/js-variables

ป้อนคำอธิบายรูปภาพที่นี่

อ่านเกี่ยวกับ: https://mathiasbynens.be/notes/javascript-identifiers-es6

ใน ES2015 ตัวระบุต้องเริ่มต้นด้วย $, _ หรือสัญลักษณ์ใด ๆ ด้วยคุณสมบัติหลักที่ได้รับจาก Unicode ID_Start

ส่วนที่เหลือของตัวระบุสามารถมี $, _, U + 200C ความกว้างเป็นศูนย์ไม่ใช่ผู้เข้าร่วม, U + 200D ศูนย์ความกว้างเข้าร่วมหรือสัญลักษณ์ใด ๆ ที่มีคุณสมบัติหลักที่ได้รับ Unicode ID_Continue

const target = document.querySelector("div").id
console.log(
   target
)
document.getElementById(target).style.backgroundColor = "black"
div {
  border: 1px black solid;
  width: 100%;
  height: 200px
}
<div id="H̹̙̦̮͉̩̗̗ͧ̇̏̊̾Eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣Cͯ̂͐͏̨̛͔̦̟͈̻O̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢M̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐H̙̙̔̄͜">


คุณควรใช้มันหรือไม่? อาจไม่ใช่ความคิดที่ดี!

อ่านเกี่ยวกับ: https://stackoverflow.com/a/52799593/2494754


-4

ตัวอักษร -> ตัวพิมพ์ใหญ่และตัวเลขขนาดเล็ก -
> 0-9 ตัวอักษร
พิเศษ -> ':', '-', '_', '.'

รูปแบบควรเริ่มต้นจาก '.' หรือตัวอักษรตามด้วยอักขระพิเศษที่มีทั้งตัวอักษรหรือตัวเลขเพิ่มเติม ค่าของฟิลด์ id ต้องไม่สิ้นสุดที่ '_'
นอกจากนี้ไม่อนุญาตให้เว้นวรรคหากมีการเว้นวรรคจะถือว่าเป็นค่าที่แตกต่างกันซึ่งไม่ถูกต้องในกรณีของแอตทริบิวต์ id

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.