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