คุณสามารถกำหนดเป้าหมายองค์ประกอบด้วย CSS เฉพาะในกรณีที่มี 2 คลาสได้หรือไม่?

ดังที่คุณทราบแล้วคุณอาจมีหลายคลาสในองค์ประกอบโดยคั่นด้วยช่องว่าง

ตัวอย่าง

<div class="content main"></div>

และด้วย CSS คุณสามารถกำหนดเป้าหมายdivด้วย.contentหรือ.main. มีวิธีกำหนดเป้าหมายเฉพาะในกรณีที่มีทั้งสองคลาสหรือไม่?

ตัวอย่าง

<div class="content main">I want this div</div>
<div class="content">I don't care about this one</div>
<div class="main">I don't want this</div>

ฉันจะใช้ตัวเลือก CSS ใดเพื่อรับตัวเลือกแรกdivเท่านั้น (สมมติว่าฉันใช้ไม่ได้.content:first-childหรือคล้ายกัน)

.content.mainใช่เพียงแค่เชื่อมพวกเขา ดูตัวเลือกคลาส CSS

แต่โปรดทราบว่า Internet Explorer ถึงเวอร์ชัน 6 ไม่รองรับตัวเลือกคลาสหลายตัวและให้เกียรติแค่ชื่อคลาสสุดท้าย

เพียงเพื่อประโยชน์ของมัน (ฉันไม่ได้จริงๆแนะนำให้คุณทำเช่นนี้) มีเป็นวิธีที่จะทำมันอีก

.content[class~="main"] {}

หรือ:

.main[class~="content"] {}

อ้างอิง: http://www.w3.org/TR/CSS2/selector.html

E [foo ~ = "คำเตือน"] จับคู่องค์ประกอบ E ใด ๆ ที่มีค่าแอตทริบิวต์ "foo" เป็นรายการของค่าที่คั่นด้วยช่องว่างซึ่งค่าหนึ่งจะเท่ากับ "คำเตือน" ทุกประการ

การสาธิต: http://jsfiddle.net/eXrSg/

เหตุใดจึงมีประโยชน์จริง ๆ (สำหรับ IE6 เป็นอย่างน้อย):

ตั้งแต่ IE6 ไม่สนับสนุนหลายชั้นเรียนเราไม่สามารถใช้.content.main, แต่มีบางห้องสมุดจาวาสคริปต์เช่นIE-7.jsที่ช่วยให้เลือกแอตทริบิวต์ แต่ก็ยังดูเหมือนจะล้มเหลวเมื่อมันมาถึงหลายชั้นเรียน ฉันได้ทดสอบวิธีแก้ปัญหานี้ใน IE6 ด้วยจาวาสคริปต์ที่เปิดใช้งานตัวเลือกแอตทริบิวต์และมันน่าเกลียด แต่ก็ใช้งานได้

ฉันยังไม่พบสคริปต์ที่ทำให้ IE6 รองรับตัวเลือกคลาสหลายตัว แต่พบหลายตัวที่เปิดใช้งานตัวเลือกแอตทริบิวต์ หากมีใครรู้จักสิ่งที่ได้ผลโปรดตะโกนในความคิดเห็นเพื่อให้ฉันสามารถกำจัดวิธีแก้ปัญหานี้ได้