แม้ว่าคุณจะคิดว่าเหตุผลอาจเป็นปัญหาของเบราว์เซอร์ แต่ก็มีแนวโน้มว่าคำจำกัดความสไตล์ของคุณจะไม่ถูกต้อง เพื่อให้แน่ใจว่าคุณสามารถเห็นรูปแบบการเชื่อมต่อในสถานะต่าง ๆ ควรมีการสั่งซื้อสไตล์ที่ถูกต้อง:
ลิงค์ - เยี่ยมชม - Hover - Active หรือ LVHA (ตัวย่อ)
เนื้อหาหลัก:
แต่ละตัวเลือกมีความจำเพาะ หากตัวเลือกสองตัวถูกนำไปใช้กับองค์ประกอบเดียวกันตัวเลือกที่มีความจำเพาะสูงกว่าจะชนะและมีลำดับความสำคัญ ตัวอย่างเช่น:
p.hithere {color: green;} / * เฉพาะ = 1,1 * /p {color: red;} / * เฉพาะ = 1 * /
เนื้อหาย่อหน้าใด ๆ ที่มีคลาส class = Hithere จะแสดงเป็นสีเขียวแทนที่จะเป็นสีแดง ตัวเลือกทั้งสองมีชุดสี แต่ตัวเลือกที่มีความจำเพาะสูงกว่าจะชนะ
คลาสหลอกส่งผลกระทบต่อความจำเพาะอย่างไร พวกเขามีค่าถ่วงน้ำหนักเท่ากันและรูปแบบต่อไปนี้มีค่าถ่วงน้ำหนักที่เหมือนกัน:
A: Link {color: blue;} / * special = 1,1 * /a: Active {color: red;} / * เฉพาะ = 1,1 * /a: hover {color: magenta;} / * เฉพาะ = 1,1 * /a: เยี่ยม {color: purple;} / * เฉพาะ = 1,1 * / / / /
นี่คือการตั้งค่าสไตล์สำหรับการเชื่อมโยงหลายมิติ ในกรณีส่วนใหญ่ต้องตั้งรูปแบบเหล่านี้หลายรูปแบบในเวลาเดียวกัน ตัวอย่างเช่นการเชื่อมโยงหลายมิติที่ไม่ได้เข้าชมสามารถตั้งค่าในรูปแบบที่แตกต่างกันทั้งในการเปิดตัวของเมาส์และการเปิดใช้งานเมาส์เมื่อโฮเวอร์และคลิก เนื่องจากกฎสามข้อข้างต้นสามารถนำไปใช้กับการเชื่อมโยงหลายมิติและตัวเลือกทั้งหมดมีความเฉพาะเจาะจงเท่ากันจากนั้นตามกฎการชนะสไตล์สุดท้าย ดังนั้นสไตล์ที่ใช้งานจะไม่ปรากฏขึ้นเพราะมันถูกปกคลุมด้วยสไตล์โฮเวอร์เสมอ (เช่นโฮเวอร์เป็นที่ต้องการ) ตอนนี้เรามาวิเคราะห์ว่าผลกระทบของการเชื่อมโยงหลายมิติที่ได้รับการเยี่ยมชมคืออะไรและผลที่ได้คือสีม่วงเสมอ :( เพราะสไตล์การเยี่ยมชมมักจะมีความสำคัญกว่ากฎสไตล์รัฐอื่น ๆ (รวมถึงการใช้งานและโฮเวอร์)
นี่คือเหตุผลที่ CSS1 แนะนำการสั่งซื้อสไตล์:
A: Linka: Visiteda: Hovera: Active
ในความเป็นจริงลำดับของสองรูปแบบแรกสามารถเปลี่ยนได้เนื่องจากการเชื่อมโยงหลายมิติไม่สามารถมีอยู่ในเวลาเดียวกันกับรัฐที่ไม่ได้เข้าถึงและเข้าถึง (: ลิงก์หมายถึงไม่ได้รับการเยี่ยมชมฉันไม่รู้ว่าทำไมมันไม่ได้กำหนดเช่นนี้)
ตอนนี้ CSS2 อนุญาตให้คลาสหลอกปรากฏในกลุ่มสหภาพตัวอย่างเช่น:
A: เยี่ยมชม: Hover {color: maroon;} / * เฉพาะ = 2,1 * /a: link: hover {color: magenta;} / * เฉพาะ = 2,1 * /a: hover: {color: cyan;} / * เฉพาะ = 2,1 * / / /
พวกเขามีความเฉพาะเจาะจงเหมือนกัน แต่พวกเขาใช้กับสัตว์ที่แตกต่างกันโดยพื้นฐานและอย่าขัดแย้ง คุณสามารถรับชุดค่าผสมที่มีการทดสอบได้เช่น
จะเข้าใจความจำเพาะที่เกี่ยวข้องในบทความนี้ได้อย่างไร? ความจำเพาะสามารถเข้าใจได้ว่าเป็นสตริงตัวเลขที่ไม่เพียงเชื่อมต่อกัน ตัวอย่างด้านบน: p.hithere {color: green;} / * ความจำเพาะ = 11 * /p {color: red;} / * ความจำเพาะ = 1 * /
นี่ดูเหมือนจะเป็นการดำเนินการง่ายๆตามทศนิยม อย่างไรก็ตามการคำนวณความจำเพาะไม่สามารถใช้อัลกอริทึมทศนิยม ตัวอย่างเช่นหากคุณใช้ตัวเลือก 15 ตัวด้วยกันค่าถ่วงน้ำหนักเฉพาะของพวกเขายังคงต่ำกว่าตัวเลือกคลาสที่เรียบง่าย ตัวอย่างเช่น:
.hello {color: red;} / * เฉพาะ = 10 * /html body div ul ol li ul ul ul ul ul ul li li (สี: สีเขียว;} / * เฉพาะ = 15 * / /
10 เป็นความจำเพาะที่ตามมา 1 และจากนั้นเป็นศูนย์ไม่ใช่สิบ เราสามารถใช้ hexadecimal เพื่ออธิบายกฎสไตล์ก่อนหน้าเช่นต่อไปนี้:
.hello {color: red;} / * เฉพาะ = 10 * /html body div ul ol li ul ul ul ul ul ul li li (สี: สีเขียว;} / * เฉพาะ = f * /
ปัญหาเดียวคือถ้าคุณต้องการเพิ่มตัวเลือกสองตัวขึ้นไปในกฎสไตล์ที่สองคุณอาจได้รับ 17 ที่เฉพาะเจาะจงที่จะสับสนอีกครั้ง ในความเป็นจริงความจำเพาะอาจไม่มีที่สิ้นสุดดังนั้นเพื่อหลีกเลี่ยงความสับสนมากขึ้นขอแนะนำให้ใช้เครื่องหมายจุลภาคเพื่อแยกค่าเฉพาะ
เว็บมาสเตอร์แนะนำ: ทำซ้ำการคำนวณค่าถ่วงน้ำหนักของความจำเพาะ การตั้งค่าเว็บไซต์ CSS สะท้อนถึงความสามารถในการควบคุมหน้า ในการพัฒนาเว็บไซต์แบบไดนามิกสถานะของ CSS ก็มีความสำคัญเช่นกัน อ่านข้อมูลเพิ่มเติมฝึกฝนเพิ่มเติมและมาที่ Wulin.com เพิ่มเติม! ถ้าคุณชอบเว็บไซต์นี้ให้โปรโมตในนามของคุณ! ขอบคุณสำหรับการอ่าน