วิธีการรวมคลาสและ ID ในตัวเลือก CSS?

221

หากฉันมี div ต่อไปนี้:

<div class="sectionA" id="content">
    Lorem Ipsum...
</div>

มีวิธีกำหนดสไตล์ที่แสดงออกถึงความคิด "A div with id='content'AND class='myClass'" หรือไม่?

หรือว่าคุณจะไปทางเดียวหรืออื่น ๆ เช่นเดียวกับใน

<div class="content-sectionA">
    Lorem Ipsum...
</div>

หรือ

<div id="content-sectionA">
    Lorem Ipsum...
</div>

css css-selectors

— Larsenal
แหล่งที่มา

2

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

— TStamper

21

@TStamper: ไม่จำเป็น คุณกำลังคิดในแง่ของเอกสารคงที่เท่านั้น ในกรณีที่คุณอาจมีimg#Inboxไอคอนบนหน้าของคุณที่ปกติตั้งค่าความทึบ 50% อย่างไรก็ตามเมื่อผู้ใช้มีข้อความคุณต้องการให้มันตั้งค่าความทึบ 100% และแบ็กเอนด์บ่งบอกถึงสิ่งนี้โดยการเพิ่มactiveคลาสให้กับองค์ประกอบ ในสถานการณ์ดังกล่าวจะทำให้มีตัวเลือกที่รวมทั้ง ID และ classname

— Lèsemajesté

@TStamper: นอกจากนี้การไม่มีตัวเลือกคอมโบ id + class ที่เฉพาะเจาะจงมากขึ้นนั้นให้น้ำหนัก / ความสำคัญมากกว่ารุ่น id เพียงอย่างเดียวใช่ไหม AFAIK ก็ควร (IOW กฎ ID + ระดับคำสั่งผสมเลือกจะแทนที่กฎตัวเลือกรหัสคำสั่งผสม (นี่เป็นเหตุผล / ความจำเป็นของฉันสำหรับการค้นหาหัวข้อนี้เพียงแค่ตอนนี้)..

— Govinda

ดังนั้นฉันกำลังมีสถานการณ์ที่คล้ายกัน ฉันมีตัวอย่างผลิตภัณฑ์มากมายที่มีคำอธิบาย แต่ต้องการควบคุมเฉพาะผลิตภัณฑ์แต่ละตัวด้วยฉันสามารถทำได้: code<p id = Product_1 class = ผลิตภัณฑ์> ผลิตภัณฑ์ 1 </p> <p id = Product_2 class = ผลิตภัณฑ์> ผลิตภัณฑ์ 2 </p> code นี่ใช้เพื่อจัดแต่งทรงผมทั่วไปของผลิตภัณฑ์ทั้งหมด แต่ยังอนุญาตให้จัดแต่งทรงผมเฉพาะสำหรับผลิตภัณฑ์เฉพาะหรือไม่

— Tamer Ziady

329

ในสไตล์ชีทของคุณ:

div#content.myClass

แก้ไข: สิ่งเหล่านี้อาจช่วยได้เช่นกัน:

div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */

และตามตัวอย่างของคุณ:

div#content.sectionA

แก้ไข 4 ปีต่อมา:เนื่องจากนี่เก่ามากและผู้คนค้นพบมันต่อไป: อย่าใช้ tagNames ในตัวเลือกของคุณ #content.myClassเร็วกว่าdiv#content.myClassเพราะ tagName เพิ่มขั้นตอนการกรองที่คุณไม่ต้องการ ใช้ tagNames ในตัวเลือกเฉพาะที่คุณต้อง!

— AJM
แหล่งที่มา

31

การระบุว่า ID เป็นของ div สามารถเป็นอันตรายต่อประสิทธิภาพการแสดงผล (แม้ว่าจะเล็กน้อยมาก) โดยไม่มีประโยชน์ใด ๆ กับมันเนื่องจาก ID นั้นมีเอกลักษณ์อยู่แล้ว ฉันจะไปกับ # content.myClass แทนเพื่อทำให้มันสะอาด

— mystrdat

3

div.class#idควรจะเทียบเท่า แต่แนะนำน้อย; ใช้ส่วนที่ไม่ซ้ำกันของตัวเลือกก่อน

— เอสเอฟ

1

ขอบคุณมากสำหรับความพยายามของคุณแม้หลังจากหลายปี :) ยังคงช่วยพวกฉันอย่างฉัน ใช้สำหรับโครงการของฉัน โหวตขึ้นอย่างแน่นอน

— C4d

76

มีความแตกต่างระหว่าง#header .calloutและเป็น#header.calloutcss

นี่คือ "ภาษาอังกฤษธรรมดา" ของ#header .callout:
เลือกองค์ประกอบทั้งหมดที่มีชื่อคลาสcalloutที่เป็นลูกหลานขององค์ประกอบที่มี ID ของheaderของ

และ#header.calloutหมายถึง:
เลือกองค์ประกอบที่มี ID headerและยังเป็นชื่อชั้นของcalloutและยังเป็นชื่อชั้นของ

คุณสามารถอ่านเพิ่มเติมได้ที่นี่เทคนิค CSS

— Reza Abbasi
แหล่งที่มา

ฉันทำผิดพลาดนี้ด้วยช่องว่าง: #id .class vs # id.class

— ERJAN

5

ไม่มีอะไรผิดปกติในการรวม ID และคลาสในองค์ประกอบเดียว แต่คุณไม่จำเป็นต้องระบุทั้งสองอย่างในกฎเดียว หากคุณต้องการทำจริงๆ:

#content.sectionA{some rules}

คุณไม่ต้องการ divอยู่หน้า ID ดังที่คนอื่นแนะนำ

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

ที่เดือดลงไปนี้:

 .sectionA{some general rules here}
 #content{specific rules, and overrides for things in .sectionA}

ทำให้รู้สึก?

— Gabriel Hurley
แหล่งที่มา

4

โดยทั่วไปแล้วคุณไม่จำเป็นต้องจำแนกองค์ประกอบที่ระบุโดย id เนื่องจาก id นั้นไม่ซ้ำกันเสมอ แต่ถ้าคุณต้องการจริงๆสิ่งต่อไปนี้ควรใช้งานได้:

div#content.sectionA {
    /* ... */
}

— Blixt
แหล่งที่มา

1

คุณสามารถรวม ID และ Class ใน CSS ได้ แต่ ID นั้นมีจุดประสงค์ที่จะไม่ซ้ำกันดังนั้นการเพิ่มคลาสให้กับตัวเลือก CSS จะทำให้เกินคุณสมบัติ

— Eric Wendelin
แหล่งที่มา

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

— ajm

5

ถ้าคุณใช้สไตล์ชีทเดียวกันกับหน้าอื่น :-)

— Patrick McElhaney

5

อีกตัวอย่าง: เมื่อมีการเพิ่มคลาสแบบไดนามิกด้วย Javascript (# optionalFields.enabled)

— Patrick McElhaney

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

— Eric Wendelin

ใช่ฉันคิดว่าเป็นเรื่องธรรมดาที่จะทำเช่นนี้ เช่น li # SomeTab.state-selected

— Yablargo

1

ใช้: tag.id ; tag#classในตัวแปรแท็กใน css ของคุณ

— ลาน ...
แหล่งที่มา

1

ฉันคิดว่าคุณผสมกันเล็กน้อย - tag.class และ tag # id ใช่ไหม

— Harijs Krūtainis

0

รหัสควรมีความกว้างของเอกสารที่ไม่ซ้ำกันดังนั้นคุณไม่ควรเลือกตามทั้งสองอย่าง คุณสามารถกำหนดองค์ประกอบหลายคลาสได้ด้วยclass="class1 class2"

— เบ็นฮิวจ์
แหล่งที่มา

1

ชั้นสามารถเปลี่ยน ตัวอย่างเช่นคุณสามารถมี # id.active และ div # id.inactive

— Daniel Moura

ยุติธรรมมาลองคิดดูฉันใช้ฟังก์ชั่นนี้ แต่ฉันเข้าใจผิดว่าพฤติกรรมที่ต้องการคืออะไร

— Ben Hughes

0

ฉันคิดว่าคุณผิด ID กับ Class ไม่ใช่คำถามของความจำเพาะ พวกเขามีการใช้เชิงตรรกะที่แตกต่างอย่างสิ้นเชิง

ID ควรใช้เพื่อระบุส่วนเฉพาะของหน้า: ส่วนหัว, แถบนำทาง, บทความหลัก, การระบุแหล่งที่มาของผู้เขียน, ส่วนท้าย

ควรใช้คลาสเพื่อใช้สไตล์กับเพจ สมมติว่าคุณมีเว็บไซต์นิตยสารทั่วไป ทุกหน้าในเว็บไซต์จะมีองค์ประกอบเดียวกัน - ส่วนหัว, nav, บทความหลัก, แถบด้านข้าง, ส่วนท้าย แต่นิตยสารของคุณมีหัวข้อต่าง ๆ เช่นเศรษฐศาสตร์, กีฬา, บันเทิง คุณต้องการให้ทั้งสามส่วนมีรูปลักษณ์ที่แตกต่างกัน - อนุรักษ์นิยมเชิงอนุรักษ์และจตุรัส, แอคชั่นกีฬา -y, ความบันเทิงสดใสและความเยาว์วัย

คุณใช้คลาสสำหรับสิ่งนั้น คุณไม่ต้องการสร้าง ID หลายรายการ - # economics-article และ # sports-article และ # entertainment-article ไม่สมเหตุสมผลเลย แต่คุณจะกำหนดสามคลาส,. เศรษฐศาสตร์, กีฬาและ. บันเทิงจากนั้นกำหนด #nav, #article และ #footer id สำหรับแต่ละ

— เกร็ก
แหล่งที่มา

คุณสามารถใช้แท็ก HTML แบบ semantic แทนรหัสสำหรับองค์ประกอบส่วนใหญ่ที่คุณพูดถึง แท็กส่วนหัวท้ายกระดาษส่วน ฯลฯ มีอยู่ด้วยเหตุผล

— Walter Schwarz

แต่ที่จริงแล้วคุณควรใช้ ID สำหรับองค์ประกอบที่ควรเป็นแบบซิงเกิล แต่ถึงกระนั้นก็มีประโยชน์จริงๆถ้าคุณต้องการเข้าถึงองค์ประกอบนั้นผ่าน JavaScript เนื่องจากการใช้ ID ทำให้ CSS ของคุณเฉพาะเจาะจงเกินไปและยากที่จะผสานในภายหลังกับ CSS และ / หรือ HTML อื่น ๆ นอกจากนี้ยังมีข้อโต้แย้งว่า ID นั้นเร็วกว่าคลาส แต่ความแตกต่างนั้นเล็กน้อยมาก

— Walter Schwarz

-1

.sectionA[id='content'] { color : red; }

จะไม่ทำงานเมื่อประเภทเอกสารเป็น html 4.01 แม้ว่า ...

— BoltClock
แหล่งที่มา