เหตุใดจึงต้องใช้ตัวเลือกแอตทริบิวต์เพื่อจับคู่คลาส

ฉันพบตัวอย่างของเทมเพลตอีเมลที่ตอบสนองซึ่งมีตัวเลือก CSS ดังต่อไปนี้:

a[class="btn"]

เหตุใดจึงใช้ไวยากรณ์นี้ถ้ามันเหมือนกับ:

a.btn

มันมีผลกระทบกับเบราว์เซอร์มือถือหรืออย่างอื่นหรือไม่?

css css-selectors

— ดูซิน
แหล่งที่มา

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

— BoltClock

144

[]ไวยากรณ์เป็นตัวเลือกแอตทริบิวต์

a[class="btn"]

นี้จะเลือกใด ๆแท็ก<a> class="btn"อย่างไรก็ตามจะไม่เลือก<a>ที่มีclass="btn btn_red"เช่น (ในขณะที่a.btnจะ) มันตรงกับแอตทริบิวต์ที่

คุณอาจต้องการที่จะอ่าน30 Selectors CSS คุณต้องจดจำ เป็นสิ่งล้ำค่าสำหรับนักพัฒนาเว็บที่กำลังมาแรง

— เอริค
แหล่งที่มา

แต่มันไม่มีอะไรที่จะตอบสนองมันเป็นไวยากรณ์ CSS ที่บริสุทธิ์ใช่ไหม

— ducin

ฉันยังเจอบทช่วยสอนแบบเดียวกัน ( campaignmonitor.com/guides/mobile/coding ) - ดูเหมือนแปลกที่พวกเขาจะใช้เทคนิคนี้ในบทช่วยสอน บทแนะนำควรทำให้ทุกอย่างชัดเจนที่สุดสำหรับผู้ที่เริ่มต้น โดยเฉพาะอย่างยิ่งเมื่อ.btnตัวเลือกทั่วไปเพียงพอ ฉันพลาดอะไรไปหรือเปล่า? มีประโยชน์ต่อสิ่งนี้หรือไม่? ความเฉพาะเจาะจงมากขึ้นที่ฉันคาดเดา?

— nickspiel

ไม่มีวิธีใหม่ในการเลือกชื่อคลาสทั้งหมดโดยใช้ jQuery และวงเล็บเพื่อให้ได้ทุกคลาสที่มีคำนำหน้าเหมือนกัน? บางอย่างเช่น $ (this) .css ("[class ~ = 'btn_']", "red"); ไวยากรณ์อาจผิด แต่คุณรู้หรือไม่ว่าไวยากรณ์ที่ถูกต้องคืออะไร?

— whyoz

@whyoz [class^='btn_']ผมคิดว่าคุณกำลังมองหา

— Eric

จะเป็นการดีมากหากคุณอัปเดตคำตอบเพื่อแสดงตัวเลือกแอตทริบิวต์ประเภทอื่น ๆ ด้วย การค้นหา "css selector square brackets" จะทำให้เกิดคำถามนี้ในการค้นหาและเป็นการยากที่จะค้นหารูปแบบอื่น ๆ ("css selector square brackets star")

— cimmanon