สไตล์ชีทของ CSS ในลำดับใดที่จะแทนที่?

157

ในส่วนหัวของ HTML ฉันได้รับสิ่งนี้:

<head>
<title>Title</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

styles.cssเป็นแผ่นงานเฉพาะหน้าของฉัน master.cssเป็นแผ่นงานที่ฉันใช้ในแต่ละโครงการของฉันเพื่อแทนที่ค่าเริ่มต้นของเบราว์เซอร์ สไตล์ชีตใดที่มีลำดับความสำคัญสูง ตัวอย่าง: ชีตแรกมีเฉพาะ

body { margin:10px; }

และเส้นขอบที่เกี่ยวข้อง แต่ที่สองมีการรีเซ็ตของฉัน

html, body:not(input="button") {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

ในสาระสำคัญองค์ประกอบ cascading ของ CSS ทำงานเหมือนกันในแง่ของการอ้างอิงสไตล์ชีทเหมือนกับใน CSS function ทั่วไปหรือไม่ หมายความว่าบรรทัดสุดท้ายเป็นบรรทัดที่แสดงหรือไม่

css overriding stylesheet

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

ตอนนี้ฉันเพิ่งรู้ว่าสิ่งนี้จะเหมาะสำหรับเว็บมาสเตอร์ จะมีที่ไหนที่ดีกว่าในการโพสต์สิ่งนี้?

— ian5v

10

ที่นี่ดี

— เครื่องปั่น

4

body:not(input="button")ไม่ใช่ตัวเลือกที่ถูกต้องตามวิธี body, input:not([type="button"])คุณอาจจะหมายถึงการแยกไว้ใน

— BoltClock

นั่นดูน่าสนใจ. ฉันไม่เชื่อว่าฉันเคยเห็นรูปแบบนี้มาก่อน ฉันยังใหม่อยู่ แต่วงเล็บสองอันนั้นต่างกับฉัน

— ian5v

วงเล็บเหล่านั้นใช้สำหรับตัวเลือกแอททริบิวต์: developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors @topic: อาจเป็นไปได้ว่าคุณต้องการสลับลำดับของสไตล์ชีต: นายพลของคุณmaster.cssควรโหลดก่อนจากนั้นจึงจะง่ายกว่าการลบล้าง styles.cssต้นแบบรูปแบบในของคุณ

— grilly

163

กฎสำหรับ CSS กฎการเรียงซ้อนนั้นซับซ้อน - แทนที่จะพยายามถอดความมันเสียมากฉันจะแนะนำคุณให้ดูสเป็ค:

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

กล่าวโดยย่อ: กฎที่เฉพาะเจาะจงมากกว่าจะแทนที่กฎทั่วไปที่มากกว่า มีการกำหนดความจำเพาะเจาะจงตามจำนวน ID คลาสและชื่อองค์ประกอบที่เกี่ยวข้องรวมถึงว่ามี!importantการใช้การประกาศหรือไม่ เมื่อมีกฎหลายข้อในระดับ "ความจำเพาะ" เดียวกันกฎข้อใดข้อหนึ่งปรากฏว่าเป็นชัยชนะครั้งสุดท้าย

— duskwuff -inactive-
แหล่งที่มา

1

แล้วไม่มีกฎเฉพาะเกี่ยวกับสิ่งที่รูปแบบการสั่งซื้อโหลด? ฉันเข้าใจว่า CSS แสดงในแง่ของความเฉพาะเจาะจง แต่จากนั้นฉันจะถือว่าแผ่นงานต้นแบบของฉันจะโหลดเว้นแต่จะถูกแทนที่

— ian5v

11

จริงๆแล้ว!importantมีส่วนร่วมโดยตรงในน้ำตกและไม่มีอะไรเกี่ยวข้องกับความเฉพาะเจาะจง ความจำเพาะเกี่ยวข้องกับตัวเลือกในขณะที่!importantใช้กับการประกาศคุณสมบัติ (คุณพูดถูกแล้วว่ากฎนั้นซับซ้อน!;)

— BoltClock

2

สไตล์ชีทจะโหลดเช่นเดียวกับองค์ประกอบหรือไม่การใช้ลำดับความสำคัญล่าสุดหากมีความเฉพาะเจาะจงเดียวกันหรือไม่

— ian5v

3

@iananananan: โดยพื้นฐานแล้วเบราว์เซอร์ไม่เคยเห็น CSS ในแง่ของสไตล์ชีทของแต่ละบุคคล หากมีหลายสไตล์ชีตพวกเขาทั้งหมดจะได้รับการปฏิบัติเสมือนเป็นหนึ่งในสไตล์ชีทยักษ์และจะมีการประเมินกฎให้เหมาะสม

— BoltClock

2

@ user34660 ความคิดเห็นของ BoltClock มาจากมุมมองของสไตล์ CSS คุณถูกต้องว่าสไตล์ชีทนั้นถูกแยกออกจากกันใน DOM แต่การแยกนั้นไม่ส่งผลต่อการใช้สไตล์เหล่านั้นกับสิ่งใด ๆ

— duskwuff -inactive-

31

ใช้สไตล์เฉพาะที่สุด:

div#foo {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

div {
  color: red;
}

หากตัวเลือกทั้งหมดมีความเฉพาะเจาะจงเหมือนกันจะมีการใช้ decleration ล่าสุด:

div {
  color: red;
}

div {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

ในกรณีของคุณbody:not([input="button"])มีความเฉพาะเจาะจงมากขึ้นเพื่อใช้สไตล์ของมัน

— เครื่องปั่น
แหล่งที่มา

1

ดูความคิดเห็นของฉันเกี่ยวกับคำถามเกี่ยวกับตัวเลือกสุดท้ายนั้น

— BoltClock

1

กฎความจำเพาะทำให้สิ่งต่าง ๆ ยากขึ้นเมื่อเราต้องการแทนที่สไตล์ชีทที่ไม่สามารถแก้ไขได้!

— Ari

23

สั่งซื้อไม่สำคัญ มูลค่าที่ประกาศล่าสุดของการเกิดขึ้นหลายครั้งจะถูกนำมาใช้ โปรดดูสิ่งเดียวกับที่ฉันทำ: http://jsfiddle.net/Wtk67/

<div class="test">Hello World!!</div>


<style>
    .test{
        color:blue;
    }

    .test{
        color:red;
    }
</style>

หากคุณแลกเปลี่ยนลำดับของ.test{}แล้วคุณจะเห็นว่า HTML ใช้ค่าของคนสุดท้ายที่ประกาศใน CSS

— รอย MJ
แหล่งที่มา

3

ดังนั้นคุณควรเพิ่ม CSS ที่เฉพาะเจาะจงที่สุด

— รักสด

17

CSS การโหลดล่าสุดคือ THE MASTER ซึ่งจะแทนที่ CSS ทั้งหมดด้วยการตั้งค่า CSS เดียวกัน

ตัวอย่าง:

<head>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/master.css">
</head>

reset.css

h1 {
    font-size: 20px;
}

master.css

h1 {
    font-size: 30px;
}

เอาต์พุตสำหรับแท็ก h1 จะเป็นขนาดตัวอักษร: 30px;

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

1

สวัสดี ในกรณีของฉันการกำหนดครั้งแรก.cssถูกโหลดครั้งสุดท้าย พวกเขาจะใช้ตามลำดับที่พวกเขาโหลดหรือตามลำดับที่กำหนด?

— Eugen Konkov

ขอบคุณนี่คือคำอธิบายที่ฉันต้องการ

— HunterTheGatherer

7

ให้ลองลดความซับซ้อนของกฎ cascading ด้วยตัวอย่าง กฎเฉพาะเจาะจงมากขึ้นโดยทั่วไป

ใช้กฎของ ID แรก (เหนือคลาสและ / หรือองค์ประกอบโดยไม่คำนึงถึงลำดับ)
ใช้คลาสกับองค์ประกอบโดยไม่คำนึงถึงลำดับ
หากไม่มีคลาสหรือรหัสให้ใช้คลาสทั่วไป
ใช้สไตล์สุดท้ายในคำสั่ง (คำสั่งการประกาศตามลำดับการโหลดไฟล์) สำหรับกลุ่ม / ระดับเดียวกัน

นี่คือรหัส css และ html;

<style>
    h2{
        color:darkblue;
    }
    #important{
        color:darkgreen;
    }
    .headline {
        color:red;
    }
    article {
        color:black;
        font-style:italic;
    }
    aside h2 {
        font-style:italic;
        color:darkorange;
    }
    article h2 {
        font-style: normal;
        color: purple;
    }
</style>

นี่คือรูปแบบ css

<body>
<section>
    <div>
        <h2>Houston Chronicle News</h2>
        <article>
            <h2 class="headline" id="important">Latest Developments in your city</h2>
            <aside>
                <h2>Houston Local Advertisement Section</h2>
            </aside>
        </article>
    </div>

    <p>Next section</p>
</section>

นี่คือผลลัพธ์ ไม่ว่าลำดับของไฟล์สไตล์หรือการประกาศสไตล์id="important"จะมีผลในตอนท้าย (โปรดสังเกตการclass="deadline"ประกาศล่าสุด แต่ไม่มีผลใด ๆ )

<article>องค์ประกอบมี<aside>องค์ประกอบ แต่สไตล์การประกาศครั้งล่าสุดจะมีผลบังคับใช้ในกรณีนี้article h2 { .. } ในองค์ประกอบ H2 สาม

นี่คือผลลัพธ์ของ IE11: (สิทธิ์ไม่เพียงพอในการโพสต์ภาพ) DarkBlue: ข่าวในอดีตของฮูสตัน, DarkGreen: การพัฒนาล่าสุดในเมืองของคุณ, สีม่วง: ส่วนโฆษณาท้องถิ่นของฮูสตัน, สีดำ: ส่วนถัดไป

— Kagan Agun
แหล่งที่มา

6

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

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

2

แก้ไข: เม.ย. 2563 ตามความเห็นของ @ LeeC นี่ไม่ใช่กรณีอีกต่อไป

ใช่มันทำงานเหมือนกับว่าอยู่ในแผ่นงานเดียว:

เรื่องคำสั่งโหลด!

<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

ในโค้ดข้างต้นมีการรับประกันว่าไม่มีจะโหลดหลังmaster.css styles.cssดังนั้นหากmaster.cssโหลดเร็วและstyles.cssใช้เวลาสักครู่styles.cssจะกลายเป็นสไตล์ชีทที่สองและกฎใด ๆ ที่มีความเฉพาะเจาะจงเดียวกันจากmaster.cssนั้นจะถูกเขียนทับ

ดีที่สุดที่จะนำกฎทั้งหมดของคุณไว้ในแผ่นงานเดียว (และย่อขนาด) ก่อนการปรับใช้

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

พิจารณาตัวพิมพ์เล็กสำหรับสไตล์ชีทอื่นที่ระบุเกือบทั้งหมดที่โหลดจากส่วน <head> ของหน้าซึ่งมีคุณลักษณะสื่อแบบมีเงื่อนไขเพื่อโหลดสไตล์ชีทเฉพาะสำหรับสมาร์ทโฟนและแท็บเล็ต ในกรณีนี้ลอจิกที่ระบุในสื่อต้องเป็นเอกสิทธิ์สำหรับแต่ละสไตล์ชีทอย่างเคร่งครัดหากลำดับการโหลดไม่แน่นอน

— Lindsay Haisley

@n_i_c_k คำตอบของคุณไม่ถูกต้อง ลำดับของการประกาศคือสิ่งที่สำคัญไม่ใช่ลำดับการโหลด ฉันเพิ่งทดสอบสิ่งนี้กับพู้ทำเล่นโดยหยุดการดาวน์โหลดmaster.cssและปล่อยให้styles.cssโหลดเต็ม จากนั้นฉันก็ปล่อยให้master.cssโหลด สไตล์ "ทับซ้อน" master.cssยังคงถูกนำมาใช้ - และการแสดงผลจะถูกปิดกั้นจนกว่าจะมีการmaster.cssโหลดและถูกแยกวิเคราะห์ หมายเหตุ : ฉันลองrel=preloadใช้master.css' (no halting) and that apparently alters its _declaration_ order by hoisting it above styles.css`

— LeeC

ขอบคุณ @LeeC ฉันรู้ว่าตอนที่เขียนคำตอบของฉันถูกต้อง แต่ฉันจะตอบว่ามันได้รับการแก้ไขแล้วและแก้ไขคำตอบของฉัน

— n_i_c_k

1

วิธีที่ดีที่สุดคือใช้คลาสให้มากที่สุด หลีกเลี่ยงตัวเลือก ID (#) ต่อไป เมื่อคุณเขียนตัวเลือกที่มีคลาสเพียงคลาสเดียวการสืบทอด CSS นั้นจะติดตามได้ง่ายกว่า

อัปเดต: อ่านเพิ่มเติมเกี่ยวกับความเฉพาะเจาะจงของ CSS ในบทความนี้: https://css-tricks.com/specifics-on-css-specificity/

— Jeroen Ooms
แหล่งที่มา

1

นี่เป็นบทความที่ยอดเยี่ยมเกี่ยวกับความเฉพาะเจาะจงของ CSS: css-tricks.com/specifics-on-css-specificity

— Jeroen Ooms

0

ฉันสงสัยว่าจากคำถามของคุณว่าคุณมีตัวเลือกที่ซ้ำกันชุดต้นแบบสำหรับทุกหน้าและชุดที่เฉพาะเจาะจงมากขึ้นที่คุณต้องการแทนที่ค่าหลักสำหรับแต่ละหน้า หากเป็นเช่นนั้นคำสั่งซื้อของคุณจะถูกต้อง โหลดมาสเตอร์ครั้งแรกและกฎในไฟล์ที่ตามมาจะมีความสำคัญกว่า (หากเหมือนกันหรือมีน้ำหนักเท่ากัน) มีคำอธิบายที่แนะนำเป็นอย่างยิ่งสำหรับกฎทั้งหมดที่เว็บไซต์นี้http://vanseodesign.com/css/css-specificity-inheritance-cascaade/เมื่อฉันเริ่มต้นด้วยการพัฒนาส่วนหน้าหน้านี้ได้ตอบคำถามมากมาย

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

0

มันเป็นน้ำตกที่กำหนดความสำคัญของการประกาศ ฉันสามารถแนะนำสเปคอย่างเป็นทางการ; ส่วนนี้มันอ่านง่าย

https://www.w3.org/TR/css-cascade-3/#cascading

ต่อไปนี้มีผลต่อการเรียงลำดับจากมากไปน้อยตามลำดับความสำคัญ

การรวมกันของแหล่งกำเนิดและความสำคัญ:
1. Transition ประกาศ
2. การประกาศของตัวแทนผู้ใช้ที่ทำเครื่องหมายด้วย !important
3. คำประกาศของผู้ใช้ที่ทำเครื่องหมายด้วย !important
4. การประกาศของผู้เขียนเพจที่มีเครื่องหมาย !important
  1. คำจำกัดความขององค์ประกอบที่มีstyleคุณสมบัติ
  2. คำจำกัดความของเอกสาร
5. Animation ประกาศ
6. ประกาศของผู้เขียนหน้า
  1. คำจำกัดความขององค์ประกอบที่มีstyleคุณสมบัติ
  2. คำจำกัดความของเอกสาร
7. ประกาศของผู้ใช้
8. การประกาศของตัวแทนผู้ใช้
หากคำประกาศสองฉบับนั้นมีจุดกำเนิดและความสำคัญเหมือนกันความหมายหมายถึงองค์ประกอบที่กำหนดไว้อย่างชัดเจนจะเข้ามาในการคำนวณการให้คะแนน
- 100 คะแนนสำหรับตัวระบุทุกตัว (#x34y )
- 10 คะแนนสำหรับทุก ๆ คลาส (.level )
- 1 คะแนนสำหรับทุกองค์ประกอบ (li )
- 1 คะแนนสำหรับทุกองค์ประกอบหลอก ( :hover) ไม่รวม:not
ตัวอย่างเช่นตัวเลือกmain li + .red.red:not(:active) p > *มี specifity เป็น 24
ลำดับการปรากฏตัวเพียงบทบาทถ้าสองคำจำกัดความมีต้นกำเนิดเดียวกันความสำคัญและความจำเพาะ คำจำกัดความในภายหลังนำหน้าคำนิยามก่อนหน้าในเอกสาร (รวมถึงการนำเข้า)

— Michael Schmid
แหล่งที่มา

0

ฉันเชื่อว่าเมื่อรันโค้ดมันอ่านบนลงล่างหมายถึงลิงค์ CSS ล่าสุดจะแทนที่สไตล์ที่คล้ายกันในสไตล์ชีตใด ๆ ข้างต้น

ตัวอย่างเช่นถ้าคุณสร้างสไตล์ชีทสองแผ่น

<link rel="stylesheet" href="style1.css"> 
<link rel="stylesheet" href="style2.css">

และในทั้งสองนี้คุณตั้งค่าสีพื้นหลังของร่างกายเป็นสองสีที่ต่างกัน - สีของร่างกายใน style2.css จะให้ความสำคัญ

คุณสามารถหลีกเลี่ยงปัญหาในการจัดแต่งทรงผมโดยการใช้!IMPORTANTสไตล์คลาสที่คุณต้องการให้ความสำคัญหรืออาจจัดเรียง<link>คำสั่งซื้อของคุณใหม่

— Ennam Hoque
แหล่งที่มา