วิธีกำหนดคลาสหลายคลาสให้กับคอนเทนเนอร์ HTML? [ปิด]

398

ปิด. คำถามนี้เป็นคำถามที่ไม่สามารถทำซ้ำหรือเกิดจากความผิดพลาด ไม่ยอมรับคำตอบในขณะนี้

ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นไปตามหัวข้อสำหรับ Stack Overflow

ปิดให้บริการใน2 เดือนที่ผ่านมา

เป็นไปได้หรือไม่ที่จะกำหนดคลาสหลายคลาสให้กับHTMLคอนเทนเนอร์เดียว?

สิ่งที่ต้องการ:

<article class="column, wrapper">

html class

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

ตอนนี้คุณมีปัญหาอะไร วิธีใดก็ตามที่เป็นทางออกของปัญหานี้ ปัญหาอื่น ๆ อาจขึ้นอยู่กับปัจจัยหลายประการ

— Aurelio De Rosa

1

แม้ว่านี่จะเป็นไปได้ แต่ฉันมักจะใช้คอนเทนเนอร์ที่ซ้อนอยู่กับการสืบทอด CSS มันสวยกว่ามากและมักจะมีประโยชน์มากกว่า

— Jonathan Henson

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

— LJ ใน NJ

531

เพียงลบเครื่องหมายจุลภาคเช่นนี้:

<article class="column wrapper">

— Aurelio De Rosa
แหล่งที่มา

3

— Andre Elrico

1

ลองใช้พื้นที่แทนเครื่องหมายจุลภาค แต่ใช่ขอบคุณสำหรับคำตอบ

— Soham Mehta

188

จากมาตรฐาน

7.5.2 ตัวระบุองค์ประกอบ: แอตทริบิวต์ id และคลาส

นิยามคุณสมบัติ

id = name [CS]
คุณลักษณะนี้กำหนดชื่อให้กับองค์ประกอบ ชื่อนี้จะต้องไม่ซ้ำกันในเอกสาร

class = cdata-list [CS]
คุณลักษณะนี้กำหนดชื่อคลาสหรือชุดชื่อคลาสให้กับองค์ประกอบ จำนวนองค์ประกอบใด ๆ อาจได้รับการกำหนดชื่อชั้นหรือชื่อ ชื่อคลาสหลายชื่อต้องคั่นด้วยอักขระช่องว่าง

ใช่เพียงแค่ใส่ช่องว่างระหว่างพวกเขา

<article class="column wrapper">

แน่นอนมีหลายสิ่งที่คุณสามารถทำได้กับการสืบทอด CSS นี่คือบทความสำหรับการอ่านเพิ่มเติม

— Jonathan Henson
แหล่งที่มา

3

เบราว์เซอร์ควรคาดหวังอย่างไรว่าจะตอบสนองอย่างไรหากมีการกำหนดองค์ประกอบให้กับหลายคลาสที่ตั้งค่าที่แตกต่างกันสำหรับแอตทริบิวต์เดียวกัน มีลำดับความสำคัญสำหรับสิ่งนั้นหรือไม่?

— ชั่วนิรันดร์

6

@ JonathanHenson: ไม่มันไม่ใช่ ในกรณีที่มีความเฉพาะเจาะจงผูกกฎที่เกิดขึ้นใน CSS ชนะ

— Ulrich Schwarz

1

@UlrichSchwarz คลาส CSS ที่แสดงรายการในภายหลัง (สิ่งที่ฉันหวังไว้เมื่อทำการทดสอบนี้) หรือหลังจากนั้นในไฟล์ CSS ทั้งหมด? เพราะแน่นอนที่สุดไม่ได้ทำงานในเบราว์เซอร์ฉันทดสอบในขณะที่ฉันได้ทดสอบสมมติฐานหลัง

— Jonathan Henson

9

@JonathanHenson: ตามรายละเอียด CSS 2.1 "หากการประกาศสองรายการมีน้ำหนักต้นกำเนิดและความจำเพาะเหมือนกันการชนะที่ระบุหลังการประกาศในสไตล์ชีทที่นำเข้านั้นจะถือว่าเป็นก่อนการประกาศใด ๆ ในสไตล์ชีทเอง" ดังนั้นมันจึงเป็นคำสั่งประกาศ CSS ชื่อในแอ็ตทริบิวต์คลาสไม่มีคำสั่งที่ระบุเนื่องจาก.fooเป็นน้ำตาลสำหรับการ[class ~= foo] อ้างอิง " fooเป็นคำในแอclassททริบิว"

— Ulrich Schwarz

1

@UlrichSchwarz ขอบคุณสำหรับคำชี้แจง

— Jonathan Henson

18

ในการกำหนดหลายคลาสให้กับองค์ประกอบ htmlให้รวมทั้งชื่อคลาสไว้ในใบเสนอราคาของแอตทริบิวต์ class และให้คั่นด้วยช่องว่าง:

<article class="column wrapper">

ในตัวอย่างข้างต้นcolumnและwrapperเป็น css สองคลาสแยกกันและคุณสมบัติทั้งสองจะถูกนำไปใช้กับarticleองค์ประกอบ

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

16

คำตอบนี้แตกต่างจากครั้งก่อนอย่างไร

— IvánRodríguez Torres

-2

คุณต้องใส่จุดระหว่างคลาส

class = "column.wrapper">

— amit kumar
แหล่งที่มา