ฉันสามารถใช้กลไกตัวเลือกเช่นเสียงดังฉ่าเพื่อเปรียบเทียบตัวเลือก CSS ได้หรือไม่

นี่คือปัญหาของฉัน: ฉันกำลังเขียนปลั๊กอิน WordPress ที่ช่วยให้ผู้เขียน CSS มือใหม่เห็นว่า css นำไปใช้กับธีมของพวกเขาแบบเรียลไทม์ได้อย่างไร มันมีคุณสมบัติที่ดีมากมาย ยกเว้นคุณสมบัติหนึ่งซึ่งค่อนข้างสำคัญในใจของฉัน

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

ฉันมีเส้นทางตัวเลือกแบบเต็มไปยังองค์ประกอบ (เช่น html body div#page div#post-18.post h2.posttitle) และฉันได้แยกวิเคราะห์สไตล์ชีตเป็นตัวเลือกแต่ละตัว - แต่ฉันไม่สามารถหาวิธีใดได้ เปรียบเทียบทั้งสอง แนวคิดบางอย่างที่ฉันมี:

1. ใช้ jQuery และเรียกใช้ตัวเลือกทุกตัว (ในสไตล์ชีท) เพื่อดูว่ามันส่งคืนอะไร ฉันไม่ได้คลั่งไคล้สิ่งนี้เพราะมันดูเหมือนว่าจะต้องใช้ประสิทธิภาพอย่างมากในการตรวจสอบตัวเลือก (อาจมีนับพัน) กับ DOM เต็มรูปแบบ ยิ่งไปกว่านั้น ฉันยังต้องเปรียบเทียบวัตถุ jQuery เพื่อดูว่าพวกมันชี้ไปที่สิ่งเดียวกันหรือไม่ และจากสิ่งที่ฉันได้อ่านเกี่ยวกับการเปรียบเทียบวัตถุ ฉันไม่แน่ใจว่าจะเป็นการดีหรือไม่ สวนสาธารณะ.

2. เขียนฟังก์ชันการเปรียบเทียบง่ายๆ ของตัวเอง และเปรียบเทียบเส้นทางของตัวเลือกแบบเต็มกับตัวเลือก CSS ฉันค่อนข้างพอใจกับสิ่งนี้ จนกระทั่งฉันเริ่มคิดถึงตัวเลือกขั้นสูงต่างๆ - : > เป็นต้น

3. ใช้ sizzle (หรือคล้ายกัน) หรือใช้ sizzle ของ jQuery เพื่อเปรียบเทียบตัวเลือก พวกเขากำลังเรียกใช้ตัวเลือกเหล่านี้กับ DOM ดังนั้นแน่นอนว่าพวกเขามีความสามารถในการเปรียบเทียบสตริงตัวเลือกหรือไม่ อย่างใด?

ผมติดอยู่. ความช่วยเหลือใด ๆ ที่ชื่นชมอย่างมาก