ตัวเลือก CSS ที่มีจุดใน ID

ข้อมูลจำเพาะ HTML อนุญาตให้มีจุด (.) ใน id:

<img id="some.id" />

อย่างไรก็ตามการใช้กฎตัวเลือกรหัส CSS จะจับคู่ไม่ถูกต้อง:

#some.id { color: #f00; }

ข้อกำหนด CSS สำหรับID Selectorsไม่ได้กล่าวถึงกรณีนี้ ดังนั้นฉันคิดว่ามันใช้การรวมกันของชื่อแท็กและตัวเลือกคลาส ? ยกตัวอย่างเช่นกฎของ CSS a.classNameจะใช้กับแท็กสมอ ( <a>) ที่มีชื่อชั้นเช่นclassName<a class="className"></a>

เป็นไปได้ไหมที่จะมีกฎไฟล์ CSS ภายนอกที่อ้างอิงองค์ประกอบ HTML โดย id ที่มีจุดอยู่

ฉันไม่คาดหวังเนื่องจาก CSS ระบุว่า " ตัวระบุ " CSS ไม่รวมจุดเป็นอักขระที่ถูกต้อง นี่เป็นความไม่ตรงกันพื้นฐานระหว่างข้อกำหนด HTML และ CSS หรือไม่? เป็นทางเลือกเดียวของฉันในการใช้การเลือก CSS ประเภทอื่นหรือไม่ มีใครฉลาดกว่าฉันยืนยันหรือปฏิเสธสิ่งนี้ได้ไหม

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

หลังจากขุดดูรายละเอียดเพิ่มเติมแล้วฉันพบว่าข้อมูลจำเพาะ CSS อนุญาตให้แบ็กสแลช ( \) หลบหนีเหมือนภาษาส่วนใหญ่

ดังนั้นในตัวอย่างของฉันกฎต่อไปนี้จะตรงกัน:

#some\.id {
  color: #f00;
}

คุณยังสามารถใช้ตัวเลือกแอตทริบิวต์เช่นนี้:

[id='some.id'] {
  color: #f00;
}

เนื่องจากคุณใช้ id คุณจึงสามารถใช้ document.getElementById () ซึ่งตรวจสอบค่า id เป็นสตริงปกติไม่ใช่ตัวเลือก CSS เช่นงานต่อไปนี้ด้วย:

const myElem = document.getElementById("some.id");

ข้อเสียเปรียบเพียงประการเดียวคือคุณไม่สามารถ จำกัด ขอบเขตของการค้นหาได้เช่นเดียวกับที่คุณทำได้ด้วย querySelector เช่น someElement.querySelector () แต่เนื่องจากรหัสควรไม่ซ้ำกันเสมอการค้นหาเอกสารแบบกว้างด้วยรหัสจึงถูกต้อง