จะระบุลำดับของคลาส CSS ได้อย่างไร?

113

ฉันสับสนเล็กน้อยเกี่ยวกับ CSS และclassแอตทริบิวต์ ฉันคิดเสมอว่าลำดับที่ฉันระบุหลายคลาสในค่าแอตทริบิวต์มีความหมาย คลาสในภายหลังสามารถ / ควรเขียนทับคำจำกัดความของก่อนหน้านี้ แต่ดูเหมือนจะไม่ได้ผล นี่คือตัวอย่าง:

<html>
<head>
<style type="text/css">
    .extra {
        color: #00529B;
        border:1px solid #00529B; /* Blue */
        background-color: #BDE5F8;
    }

    .basic {
           border: 1px solid #ABABAB;
    }
</style>
</head>
<body>
    <input type="text" value="basic" class="basic"/>
    <input type="text" value="extra" class="extra"/>
    <input type="text" value="basic extra" class="basic extra"/>
    <input type="text" value="extra basic" class="extra basic"/>
</body>
</html>

ฉันคาดหวังว่าตัวอย่างที่สามclass="basic extra"ควรมีขอบสีน้ำเงินเนื่องจากในเส้นขอบที่ระบุพิเศษจะเขียนทับเส้นขอบจากพื้นฐาน

ฉันใช้ FF 3 บน ubuntu 9.04

html css

— Tim Büthe
แหล่งที่มา

246

ลำดับที่แอตทริบิวต์ถูกเขียนทับไม่ได้ถูกกำหนดโดยลำดับที่คลาสจะถูกกำหนดในclassแอตทริบิวต์ แต่จะปรากฏใน CSS แทน

.myClass1 {color:red;}
.myClass2 {color:green;}

<div class="myClass2 myClass1">Text goes here</div>

ขยายข้อมูลโค้ด

ข้อความในdivพินัยกรรมปรากฏขึ้นgreenไม่ใช่red; เพราะ.myClass2จะลดลงต่อไปในความหมาย CSS .myClass1กว่า ถ้าฉันจะสลับลำดับของชื่อคลาสในclassแอตทริบิวต์จะไม่มีอะไรเปลี่ยนแปลง

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

14

ฉันไม่เข้าใจว่าทำไมพวกเขาถึงใช้แบบนี้ สนุกพอที่จะเป็นความคิดเห็นของฉันสำหรับสิ่งอื่น ๆ ส่วนใหญ่ที่ CSS ทำได้

— โดย

@ เพราะเนื่องจากกฎมีการลดหลั่นกัน ใช้แบบฟอร์มจากบนลงล่างซ้ายไปขวา มีเหตุผลสำหรับฉัน

— O-9

27

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

คำถามคือกฎลักษณะจะปรากฏในไฟล์. css ของคุณในลำดับใด ในตัวอย่างของคุณ.basicตามมา.extraดังนั้น.basicกฎจะมีความสำคัญเหนือกว่าทุกที่ที่เป็นไปได้

หากคุณต้องการให้ความเป็นไปได้ที่สาม (เช่นเป็นไปได้.basicแต่.extraกฎนั้นยังควรมีผลบังคับใช้) คุณจะต้องคิดค้นคลาสอื่นขึ้นมาซึ่ง.basic-extraอาจมีการระบุไว้อย่างชัดเจน

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

4

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

[class$="extra"] {
  color: #00529B;
  border:1px solid #00529B;
  background-color: #BDE5F8;
}
[class$="basic"] {
  border: 1px solid #ABABAB;
}
input {display:block;}

<input type="text" value="basic" class="basic"/>
<input type="text" value="extra" class="extra"/>
<input type="text" value="basic extra" class="basic extra"/>
<input type="text" value="extra basic" class="extra basic"/>

ขยายข้อมูลโค้ด

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