ลำดับความสำคัญของ CSS คืออะไร?

ฉันพยายามหาสาเหตุว่าทำไมคลาส css ของฉันถึงแทนที่อีกคลาส (ไม่ใช่วิธีอื่น)

ที่นี่ฉันมีคลาส css สองคลาส

.smallbox { 
    background-color: white;
    height: 75px;
    width: 150px;
    font-size:20px;
    box-shadow: 0 0 10px #ccc;
    font-family: inherit;
}

.smallbox-paysummary {
    @extend .smallbox; 
    font-size:10px;
}

และในมุมมองของฉันฉันเรียก

<pre class = "span12 pre-scrollable smallbox-paysummary smallbox "> 

แบบอักษร (องค์ประกอบที่ทับซ้อนกัน) แสดงเป็น 10px แทนที่จะเป็น 20 - มีใครอธิบายได้ไหมว่าทำไมจึงเป็นเช่นนั้น

มีกฎหลายข้อ (ใช้ตามลำดับนี้):

1. inline css (แอตทริบิวต์สไตล์ html) แทนที่กฎ css ในแท็กสไตล์และไฟล์ css
2. ตัวเลือกที่เฉพาะเจาะจงมากขึ้นจะมีความสำคัญเหนือกว่าตัวเลือกที่เจาะจงน้อยกว่า
3. กฎที่ปรากฏในภายหลังในโค้ดจะแทนที่กฎก่อนหน้านี้หากทั้งสองมีความจำเพาะเหมือนกัน
4. กฎ css ที่มี!importantความสำคัญเสมอ

ในกรณีของคุณกฎ 3 ที่บังคับใช้

ความจำเพาะสำหรับตัวเลือกเดียวจากสูงสุดไปต่ำสุด:

• รหัส (ตัวอย่าง: #mainเลือก<div id="main">)
• ชั้นเรียน (อดีต .: .myclass) แอตทริบิวต์เตอร์ (อดีต .: [href=^https:]) และหลอกเรียน (อดีต .: :hover)
• องค์ประกอบ (อดีต .: div) และหลอกองค์ประกอบ (อดีต .: ::before)

หากต้องการเปรียบเทียบความจำเพาะของตัวเลือกสองตัวที่รวมกันให้เปรียบเทียบจำนวนครั้งที่เกิดขึ้นของตัวเลือกเดียวของแต่ละกลุ่มความเฉพาะเจาะจงข้างต้น

ตัวอย่าง: เปรียบเทียบ#nav ul li a:hoverกับ#nav ul li.active a::after

• นับจำนวนตัวเลือกรหัส: มีหนึ่งรายการสำหรับแต่ละ ( #nav)
• นับจำนวนตัวเลือกคลาส: มีหนึ่งตัวสำหรับแต่ละตัว ( :hoverและ.active)
• นับจำนวนตัวเลือกองค์ประกอบ: มี 3 ( ul li a) สำหรับตัวแรกและ 4 สำหรับตัวที่สอง ( ul li a ::after) ดังนั้นตัวเลือกแบบรวมที่สองจึงมีความเฉพาะเจาะจงมากขึ้น

บทความที่ดีเกี่ยวกับ CSS เลือกจำเพาะ

นี่คือการรวบรวมลำดับการจัดสไตล์ CSS ในไดอะแกรมซึ่งกฎ CSS มีลำดับความสำคัญสูงกว่าและมีความสำคัญเหนือส่วนที่เหลือ:

คำเตือน : ทีมงานของฉันและฉันทำงานชิ้นนี้ร่วมกับโพสต์บล็อก ( https://vecta.io/blog/definitive-guide-to-css-styling-order ) ซึ่งฉันคิดว่าจะมีประโยชน์กับส่วนหน้าทั้งหมด นักพัฒนา

สิ่งที่เรากำลังดูอยู่นี้เรียกว่าความจำเพาะตามที่Mozillaระบุไว้:

ความจำเพาะคือวิธีที่เบราว์เซอร์ตัดสินใจว่าค่าคุณสมบัติ CSS ใดที่เกี่ยวข้องกับองค์ประกอบมากที่สุดดังนั้นจึงจะถูกนำไปใช้ ความจำเพาะขึ้นอยู่กับกฎการจับคู่ซึ่งประกอบด้วยตัวเลือก CSS ประเภทต่างๆ

ความจำเพาะคือน้ำหนักที่ใช้กับการประกาศ CSS ที่กำหนดซึ่งกำหนดโดยจำนวนของตัวเลือกแต่ละประเภทในตัวเลือกที่ตรงกัน เมื่อการประกาศหลายรายการมีความจำเพาะเท่ากันการประกาศสุดท้ายที่พบใน CSS จะถูกนำไปใช้กับองค์ประกอบ ความจำเพาะจะมีผลเฉพาะเมื่อองค์ประกอบเดียวกันถูกกำหนดเป้าหมายโดยการประกาศหลายรายการ ตามกฎ CSS องค์ประกอบที่กำหนดเป้าหมายโดยตรงจะมีความสำคัญเหนือกฎที่องค์ประกอบได้รับมาจากบรรพบุรุษเสมอ

ฉันชอบคำอธิบาย0-0-0ที่https://specifishity.com :

บรรยายภาพตรงประเด็น!important! แต่บางครั้งก็เป็นวิธีเดียวที่จะลบล้างstyleแอตทริบิวต์แบบอินไลน์ ดังนั้นจึงเป็นแนวทางปฏิบัติที่ดีที่สุดในการพยายามหลีกเลี่ยงทั้งสองอย่าง

ก่อนอื่นตาม@extendคำสั่งของคุณดูเหมือนว่าคุณไม่ได้ใช้ CSS บริสุทธิ์ แต่เป็นตัวประมวลผลล่วงหน้าเช่น SASS os Stylus

ตอนนี้เมื่อเราพูดถึง "ลำดับความสำคัญ" ใน CSS จะมีกฎทั่วไปที่เกี่ยวข้อง: กฎใดก็ตามที่ตั้งขึ้นหลังจากกฎอื่น ๆ (ในรูปแบบจากบนลงล่าง) จะถูกนำไปใช้ ในกรณีของคุณเพียงแค่ระบุ.smallboxหลังจากที่.smallbox-paysummaryคุณจะสามารถเปลี่ยนลำดับความสำคัญของกฎของคุณได้

แต่ถ้าคุณอยากจะไปต่ออีกนิดผมขอแนะนำให้อ่านนี้: ข้อกำหนด CSS น้ำตก W3C คุณจะพบว่าลำดับความสำคัญของกฎขึ้นอยู่กับ:

1. ประเภทสื่อปัจจุบัน
2. ความสำคัญ;
3. แหล่งกำเนิด;
4. ความจำเพาะของตัวเลือกและสุดท้ายกฎที่รู้จักกันดีของเรา:
5. ระบุไว้หลังใด

AS อยู่ใน W3: W3 Cascade CSS

ลำดับที่ใช้สไตล์ชีตที่แตกต่างกันมีดังต่อไปนี้ (อ้างจากส่วนเรียงซ้อน W3):

1. การประกาศตัวแทนผู้ใช้

2. การประกาศปกติของผู้ใช้

3. ผู้เขียนประกาศปกติ

4. ผู้เขียนคำประกาศที่สำคัญ

5. การประกาศที่สำคัญของผู้ใช้

ข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ในเอกสาร W3 ที่อ้างถึง

ลำดับที่คลาสปรากฏในองค์ประกอบ html ไม่สำคัญสิ่งที่นับคือลำดับที่บล็อกปรากฏในสไตล์ชีต

ในกรณีของคุณ.smallbox-paysummaryถูกกำหนดไว้หลังจากนั้น.smallboxความสำคัญ 10px

Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)

Inline css (แอตทริบิวต์สไตล์ html) แทนที่กฎ css ในแท็กสไตล์และไฟล์ css

ตัวเลือกที่เฉพาะเจาะจงมากขึ้นจะมีความสำคัญเหนือกว่าตัวเลือกที่เจาะจงน้อยกว่า

กฎที่ปรากฏในภายหลังในโค้ดจะแทนที่กฎก่อนหน้านี้หากทั้งสองมีความจำเพาะเหมือนกัน

สิ่งสำคัญที่ควรทราบก็คือเมื่อคุณมีสองสไตล์ในองค์ประกอบ HTML ที่มีลำดับความสำคัญเท่ากันเบราว์เซอร์จะให้ความสำคัญกับสไตล์ที่เขียนลงใน DOM ล่าสุด ... ดังนั้นหากอยู่ใน DOM:

<html>
<head>
<style>.container-ext { width: 100%; }</style>
<style>.container { width: 50px; }</style>
</head>
<body>
<div class="container container-ext">Hello World</div>
</body>

... ความกว้างของ div จะเท่ากับ 50px