คะแนนในความจำเพาะของ CSS คำนวณอย่างไร

การค้นคว้าข้อมูลเฉพาะที่ฉันพบในบล็อกนี้ - http://www.htmldog.com/guides/cssadvanced/specificity/

ระบุว่าความจำเพาะเป็นระบบการให้คะแนนแบบจุดสำหรับ CSS มันบอกเราว่าองค์ประกอบมีค่า 1 คะแนนคลาสมีค่า 10 คะแนนและ ID มีค่า 100 คะแนน นอกจากนี้ยังกล่าวอีกว่าคะแนนเหล่านี้รวมและจำนวนเงินโดยรวมคือความจำเพาะของตัวเลือกนั้น

ตัวอย่างเช่น:

body = 1 point
body .wrapper = 11 points
body .wrapper #container = 111 points

ดังนั้นเมื่อใช้จุดเหล่านี้ฉันคาดว่า CSS และ HTML ต่อไปนี้จะส่งผลให้ข้อความเป็นสีน้ำเงิน:

#a {
    color: red;
}

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
  color: blue;
}

<div class="a">
  <div class="b">
    <div class="c">
      <div class="d">
        <div class="e">
          <div class="f">
            <div class="g">
              <div class="h">
                <div class="i">
                  <div class="j">
                    <div class="k">
                      <div class="l">
                        <div class="m">
                          <div class="n">
                            <div class="o" id="a">
                              This should be blue.
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

เหตุใดข้อความจึงเป็นสีแดงเมื่อ 15 ชั้นเรียนเท่ากับ 150 คะแนนเมื่อเทียบกับ 1 ID ซึ่งเท่ากับ 100 คะแนน

เห็นได้ชัดว่าคะแนนไม่ได้รวมเพียงอย่างเดียว เชื่อมต่อกัน อ่านเพิ่มเติมได้ที่นี่ - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

นั่นหมายความว่าคลาสในตัวเลือกของเรา = 0,0,15,0OR 0,1,5,0?

(สัญชาตญาณของฉันบอกฉันว่ามันเป็นอดีตที่เรารู้ว่าตัวเลือกหมายเลขของรูปลักษณ์ที่เฉพาะเจาะจงเช่นนี้0,1,0,0)

คำตอบของ Pekkaนั้นถูกต้องในทางปฏิบัติและอาจเป็นวิธีที่ดีที่สุดในการคิดเกี่ยวกับปัญหานี้

อย่างไรก็ตามตามที่หลายคนได้ชี้ให้เห็นแล้วคำแนะนำของ W3C CSS ระบุว่า "การต่อตัวเลขสามตัว abc (ในระบบตัวเลขที่มีฐานขนาดใหญ่) ให้ความเฉพาะเจาะจง" ดังนั้นสิ่งที่เกินบรรยายในตัวฉันก็แค่ต้องหาว่าฐานนี้ใหญ่แค่ไหน

แต่กลับกลายเป็นว่า "ฐานขนาดใหญ่มาก" ลูกจ้าง (อย่างน้อย 4 โดยเบราว์เซอร์ที่ใช้มากที่สุด^* ) ที่จะใช้ขั้นตอนวิธีการมาตรฐานนี้เป็น 256 หรือ 2 8

สิ่งนี้หมายความว่าสไตล์ที่ระบุด้วย 0 รหัสและ 256 ชื่อคลาสจะใช้สไตล์ที่ระบุด้วยรหัสเพียง 1 รายการ ฉันทดสอบสิ่งนี้ด้วยการเล่นซอ:

• 255 คลาสไม่เพียงพอที่จะแทนที่ 1 id
• ... แต่ 256 คลาสก็ เพียงพอที่จะแทนที่ 1 id

• ... และ 256 ชื่อแท็กก็เพียงพอที่จะลบล้างชื่อคลาส 1 ชื่อ

• ... แต่อนิจจา 256 รหัสไม่เพียงพอที่จะแทนที่ 1 สไตล์อินไลน์ (อัปเดตเมื่อ 2012/8/15 - คุณจะต้องใช้!important)

ดังนั้นจึงมี "ระบบจุด" อย่างมีประสิทธิภาพ แต่ไม่ใช่ฐาน 10 เป็นฐาน 256 นี่คือวิธีการทำงาน:

(2 ⁸ ) ²หรือ 65536 คูณจำนวนรหัสในตัวเลือก
+ (2 ⁸ ) ¹หรือ 256 คูณจำนวนชื่อคลาสในตัวเลือก
+ (2 ⁸ ) ⁰หรือ 1 คูณจำนวนแท็ก - ชื่อในตัวเลือก

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

***** [Opera ใช้ 2 ¹⁶ (ดูความคิดเห็นของ karlcow) เครื่องมือเลือกอื่น ๆ บางตัวใช้อินฟินิตี้ - ไม่มีระบบคะแนนอย่างมีประสิทธิภาพ (ดูความคิดเห็นของ Simon Sapin)]

อัปเดตกรกฎาคม 2014:
ตามที่ Blazemonger ชี้ให้เห็นเมื่อต้นปีเบราว์เซอร์ webkit (chrome, safari) ดูเหมือนจะใช้ฐานที่สูงกว่า 256 อาจเป็น 2 ¹⁶เช่น Opera? IE และ Firefox ยังคงใช้ 256

คำถามที่ดี.

ฉันไม่สามารถบอกได้อย่างแน่นอน - บทความทั้งหมดที่ฉันจัดการเพื่อหลีกเลี่ยงตัวอย่างของหลายคลาสเช่นที่นี่ - แต่ฉันคิดว่าเมื่อพูดถึงการเปรียบเทียบข้อมูลจำเพาะระหว่างตัวเลือกคลาสและ IDคลาสจะคำนวณด้วย a มูลค่า15เท่านั้นไม่ว่าจะมีรายละเอียดอย่างไร

ตรงกับประสบการณ์ของฉันเกี่ยวกับพฤติกรรมเฉพาะเจาะจง

อย่างไรก็ตามต้องมีชั้นเรียนซ้อนกันบ้างเพราะ

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o

มีความเฉพาะเจาะจงมากกว่า

.o

คำอธิบายเดียวที่ฉันมีก็คือความจำเพาะของคลาสแบบเรียงซ้อนจะคำนวณเทียบกันเท่านั้น แต่ไม่เทียบกับ ID

อัปเดต : ฉันทำไปแล้วครึ่งทาง ไม่ใช่ระบบคะแนนและข้อมูลเกี่ยวกับชั้นเรียนที่มีน้ำหนัก 15 คะแนนไม่ถูกต้อง มันเป็นระบบเลข 4 ส่วนเป็นอย่างดีอธิบายที่นี่

จุดเริ่มต้นคือ 4 ตัวเลข:

style  id   class element
0,     0,   0,    0

ตามคำอธิบาย W3C เกี่ยวกับความจำเพาะค่าเฉพาะสำหรับกฎที่กล่าวถึงข้างต้นคือ:

#a            0,1,0,0    = 100
classes       0,0,15,0   = ... see the comments

นี่คือระบบเลขที่มีฐานขนาดใหญ่มาก (ไม่ได้กำหนด?)

ความเข้าใจของฉันคือเนื่องจากฐานมีขนาดใหญ่มากจึงไม่มีตัวเลขในคอลัมน์ 4 ที่สามารถเอาชนะตัวเลข> 0 ในคอลัมน์ 3 ได้เช่นเดียวกับคอลัมน์ 2 คอลัมน์ 1 .... ถูกต้องหรือไม่?

ฉันสนใจว่าจะมีใครเข้าใจคณิตศาสตร์ได้ดีกว่าฉันหรือไม่สามารถอธิบายระบบเลขและวิธีการแปลงเป็นทศนิยมเมื่อแต่ละองค์ประกอบมีขนาดใหญ่กว่า 9

Working Draft ตัวเลือกระดับ 4ปัจจุบันทำงานได้ดีในการอธิบายความจำเพาะใน CSS:

ความจำเพาะจะถูกเปรียบเทียบโดยการเปรียบเทียบองค์ประกอบทั้งสามตามลำดับ: ความจำเพาะที่มีค่าA ที่ใหญ่กว่านั้นมีความเฉพาะเจาะจงมากขึ้น ถ้าค่าAสองค่าเชื่อมโยงกันความจำเพาะที่มีค่าBมากขึ้นจะมีความเฉพาะเจาะจงมากขึ้น ถ้าค่าBสองค่าเชื่อมโยงกันดังนั้นความจำเพาะที่มีค่าc ที่ใหญ่กว่าจะเจาะจงมากขึ้น หากค่าทั้งหมดถูกผูกไว้ข้อมูลจำเพาะทั้งสองจะเท่ากัน

ซึ่งหมายความว่าค่า A, B และ C เป็นอิสระจากกันอย่างสมบูรณ์

15 เรียนไม่ให้ตัวเลือกของคุณคะแนนความจำเพาะของ 150 ก็ให้มันBมูลค่า 15 เดียวคุ้มค่าพอที่จะเอาชนะนี้

ในการเปรียบเทียบลองนึกภาพครอบครัวที่มีพ่อแม่ที่ยิ่งใหญ่ 1 คนพ่อแม่ 1 คนและลูก 1 คน นี้อาจจะแสดงเป็น1,1,1 หากพ่อแม่มีลูก 15 คนก็ไม่ทำให้พวกเขาเป็นพ่อแม่อีกคน ( 1,2,0 ) ในทันใด หมายความว่าผู้ปกครองมีความรับผิดชอบมากกว่าที่พวกเขามีกับลูก 1 คน ( 1,1,15 ) อย่างมาก ;)

เอกสารเดียวกันยังกล่าวต่อไปว่า:

เนื่องจากข้อ จำกัด ของการจัดเก็บข้อมูลการใช้งานอาจมีข้อ จำกัด เกี่ยวกับขนาดของ, BหรือC หากเป็นเช่นนั้นค่าที่สูงกว่าขีด จำกัด จะต้องถูก จำกัด ไว้ที่ขีด จำกัด นั้นและไม่เกิน

สิ่งนี้ถูกเพิ่มเข้ามาเพื่อแก้ไขปัญหาที่นำเสนอในคำตอบของ Faustโดยการใช้ CSS ย้อนกลับไปในปี 2012 ทำให้ค่าความจำเพาะล้นเข้ามาหากัน

ย้อนกลับไปในปี 2012 เบราว์เซอร์ส่วนใหญ่ใช้ข้อ จำกัด 255 แต่ข้อ จำกัด นี้ได้รับอนุญาตให้ล้น 255 ชั้นเรียนมีA, B, Cคะแนนความจำเพาะของ0,255,0แต่ 256 เรียนล้นและมีA, B, Cคะแนน1,0,0 ทันใดนั้นค่าBของเราก็กลายเป็นค่าA เอกสารตัวเลือกระดับ 4 ฉายรังสีปัญหานั้นอย่างสมบูรณ์โดยระบุว่าขีด จำกัด ไม่สามารถปล่อยให้ล้นได้ ด้วยการใช้งานนี้ทั้ง 255 และ 256 คลาสจะมีคะแนนA, B, cเท่ากับ0,255,0 เท่ากัน

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

ฉันกำลังใช้หนังสือCSS Mastery: เว็บมาตรฐานขั้นสูงโซลูชั่น

บทที่ 1 หน้า 16 พูดว่า:

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

(เน้นของฉัน) และ

ความจำเพาะของตัวเลือกแบ่งออกเป็นสี่ระดับองค์ประกอบ: a, b, c และ d

• หากสไตล์เป็นสไตล์อินไลน์ดังนั้น a = 1
• b = จำนวนตัวเลือกรหัสทั้งหมด
• c = จำนวนคลาสหลอกคลาสและตัวเลือกแอตทริบิวต์
• d = จำนวนตัวเลือกประเภทและตัวเลือกองค์ประกอบหลอก

กล่าวต่อไปว่าคุณสามารถคำนวณในฐาน -10 ได้บ่อยครั้ง แต่เฉพาะในกรณีที่คอลัมน์ทั้งหมดมีค่าน้อยกว่า 10

ในตัวอย่างของคุณรหัสไม่มีค่า 100 คะแนน แต่ละ[0, 1, 0, 0]คะแนนมีค่า ดังนั้นหนึ่ง id จะเต้น 15 คลาสเนื่องจาก[0, 1, 0, 0]มากกว่า[0, 0, 15, 0]ในระบบตัวเลขฐานสูง

ฉันชอบการเปรียบเทียบการจัดอันดับความจำเพาะกับตารางเหรียญโอลิมปิก (วิธีแรกของทอง - ขึ้นอยู่กับจำนวนเหรียญทองก่อนจากนั้นจึงเป็นเงินและเหรียญทองแดง)

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

นอกจากนี้ยังมีความจำเพาะค่อนข้างดีเครื่องคิดเลขที่มีอยู่ที่นี่ คุณสามารถใส่ตัวอย่าง (#a และ. a .b .c .d .e .f .g .h .i .j .k .l .m .n .o) ที่นั่นและดูผลลัพธ์

ตัวอย่างตารางเหรียญโอลิมปิก Rio 2016 มีลักษณะดังนี้

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

http://www.w3.org/TR/CSS2/cascade.html#specificity

"คะแนน" จากตัวเลือกชั้นเรียนไม่สามารถเพิ่มให้มีความสำคัญมากกว่าตัวเลือก "id" มันไม่ได้ผลเช่นนั้น

ฉันจะบอกว่า:

Element < Class < ID

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

ตัวอย่างเช่น:

.a .b .c .d .e .f .g .h .i .j .k .l
{
color: red;
}

 .m .n .o
{
color blue;
}

ควรเปลี่ยนเป็นสีแดง

ดูตัวอย่าง http://jsfiddle.net/RWFWq/

"ถ้าอันดับ 5 พูดว่าแดงและ 3 พูดว่าน้ำเงินดีอิมะก็แดง"