บทบาทของตัวเลือกคลาสหลอกใน CSS อาจกล่าวได้ว่ามีความสำคัญ หาก CSS ไม่มีตัวเลือกคลาสหลอก จะต้องทำให้เอฟเฟกต์หลายอย่างเสร็จสิ้นด้วยความช่วยเหลือของ js สิ่งนี้จะไม่เพียงเพิ่มจำนวนโค้ดเท่านั้น แต่ยังเพิ่มอีกด้วย มันยากที่จะรักษา ภาระงานหนักสำหรับโปรแกรมเมอร์ยังขัดกับจุดประสงค์ของ CSS อีกด้วย ซึ่งก็คือการปรับปรุงประสิทธิภาพการพัฒนาและการพัฒนาที่มีคุณภาพสูงขึ้นให้เสร็จสมบูรณ์ในโลกเดียวกัน
ตัวเลือกคลาสหลอกประกอบด้วยตัวเลือกคลาสหลอกและคลาสหลอก ตัวเลือกคลาสหลอกใช้โคลอน (:) เป็นตัวระบุคำนำหน้า คุณสามารถเพิ่มตัวเลือกก่อนเครื่องหมายโคลอนเพื่อจำกัดขอบเขตของแอปพลิเคชันคลาสหลอกได้ หลังจากเครื่องหมายโคลอนจะเป็นชื่อวัตถุคลาสหลอกและคลาสหลอก ไม่มีการเว้นวรรคก่อนและหลังเครื่องหมายโคลอน ตัวเลือกคลาสดังแสดงในรูป
ตารางต่อไปนี้ประกอบด้วยตัวเลือกคลาสหลอกส่วนใหญ่:
คลาสหลอกแบบไดนามิก
คลาสเทียมแบบไดนามิกเป็นรูปแบบพฤติกรรมประเภทหนึ่งไม่มีอยู่ใน HTML และสามารถสะท้อนให้เห็นได้เมื่อผู้ใช้โต้ตอบกับเพจเท่านั้น ตัวเลือกคลาสหลอกแบบไดนามิกประกอบด้วยสองรูปแบบ:
Anchor pseudo-class ซึ่งเป็นรูปแบบที่พบบ่อยที่สุดในลิงก์ เช่น :link, :visited
คลาสหลอกพฤติกรรมเรียกอีกอย่างว่าคลาสหลอกการดำเนินการของผู้ใช้ เช่น :hover, :active และ :focus
เพื่อความเรียบง่ายในการสอน ฉันเขียนเป็นแบบอินไลน์ ในการใช้งานจริง ไม่แนะนำให้คุณใช้อินไลน์
:ลิงค์
กำหนดรูปแบบของไฮเปอร์ลิงก์ก่อนกระโดด การใช้งานมีดังนี้:
<ahref=#target=_blank>กระโดด</a>
หากคุณต้องการตั้งค่าสไตล์ก่อนไฮเปอร์ลิงก์ด้านบนให้เป็นสีฟอนต์สีแดงและไม่มีการขีดเส้นใต้ คุณสามารถตั้งค่าได้ดังนี้
: มาเยือนแล้ว
คลาสหลอกนี้ตรงกันข้ามกับ :link :link คือสไตล์ที่อยู่หน้าลิงก์ และ :visited คือสไตล์ที่อยู่หลังลิงก์ นั่นคือสไตล์ไฮเปอร์ลิงก์หลังจากถูกเยี่ยมชม
<ahref=#target=_blank>กระโดด</a>:li
ในการเรียนรู้รายวัน ทุกคนอาจเขียนลิงก์ก่อนและหลังลิงก์เข้าด้วยกัน ซึ่งสะดวก รวดเร็ว และสื่อความหมาย ทำให้นักเรียนจำนวนมากไม่รู้ว่าคลาสหลอกทั้งสองคลาสนี้มีผลครอบคลุมหรือไม่ ตัวอย่างต่อไปนี้สามารถช่วยให้คุณมีความเข้าใจโดยทั่วไป:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a:link{color:red;text- decoration:none;}a:visited{color:green; การตกแต่งข้อความ:underline;}</style></head><body><ahref=login.htmltarget=_blank>กระโดด</a></body></html>โค้ดด้านบนเป็นลิงค์ข้ามจากหน้า HTML ไปยังหน้าเข้าสู่ระบบ การแสดงผลหลังจากการรันจะเป็นดังนี้:
:โฮเวอร์
ตัวเลือกคลาสหลอก :hover ใช้สำหรับกำหนดลักษณะพิเศษเมื่อผู้ใช้เลื่อนเมาส์ไปเหนือองค์ประกอบ มันไม่ได้ใช้สำหรับไฮเปอร์ลิงก์เท่านั้น แต่ยังสามารถนำไปใช้กับองค์ประกอบหลายอย่าง เช่น เมื่อคุณเลื่อนเมาส์ไปเหนือมัน คุณจะพบว่าสีพื้นหลังทางทิศเหนือของปุ่มจะเข้มขึ้นหรือเปลี่ยนสี ซึ่งทำได้โดย:โฮเวอร์ของ แน่นอนว่ามีวิธีอื่นในการตั้งค่า แต่ไม่ต้องสงสัยเลยว่าการโฮเวอร์เป็นวิธีที่ง่ายที่สุดและเร็วที่สุด ในที่นี้ฉันจะแนะนำเทคนิคการใช้ไฮเปอร์ลิงก์ก่อน จากนั้นจึงขยายและใช้เพื่อเปลี่ยนเอฟเฟกต์หลังจากที่เลื่อนเมาส์ไปเหนือองค์ประกอบ
หากคุณต้องการให้องค์ประกอบเปลี่ยนสีเมื่อวางเมาส์เหนือองค์ประกอบแท็ก รหัสจะเป็นดังนี้:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a:hover{color:blue;}</style></head><body><ahref= #target=_blank>กระโดด</a></body></html> 
ขยาย
รหัสโครงสร้างมีดังนี้:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;color:red;พื้นหลัง:orange ;text-align:center;}</style></head><body><div>:hover</div></body></html>เมื่อเอฟเฟกต์ที่ต้องการคือเมื่อเลื่อนเมาส์ไปเหนือองค์ประกอบ div สีพื้นหลังจะเปลี่ยนเป็นสีดำและแบบอักษรจะเปลี่ยนเป็นสีขาว รหัสจะเป็นดังนี้:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;color:red;พื้นหลัง:o range;text-align:center;transition:all1s;}div:hover{พื้นหลัง:black;color:white;}</style></head><body><div>:hover</div></body> </html>:คล่องแคล่ว
:active ใช้สำหรับเอฟเฟกต์สไตล์เมื่อผู้ใช้คลิกที่องค์ประกอบ ส่วนใหญ่จะใช้ในการควบคุมแบบฟอร์ม เมื่อผู้ใช้คลิก จะมีผลเหมือนกับการกดปุ่ม ด้วยเหตุผลเดียวกัน ฉันใส่สิ่งนี้ไว้ในพื้นที่ส่วนขยาย
เมื่อคลิกไฮเปอร์ลิงก์ ฉันต้องการเปลี่ยนสีแบบอักษรของไฮเปอร์ลิงก์ รหัสการใช้งานจะเป็นดังนี้:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a{color:red;}a:active{color:blue;}</style></head ><body><ahref=#target=_blank>กระโดด</a></body></html>ขยาย
ตัวอย่างนี้ใช้ div เพื่อเลียนแบบปุ่ม รูปแบบปุ่มที่มาพร้อมกับ HTML นั้นยากที่จะอธิบายด้วยคำเดียว มันง่ายที่จะเลียนแบบและควบคุมสไตล์
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;text-align:center;พื้นหลัง :green;font-size:24p x;font-weight:bold;border-radius:15px;margin:150pxauto;cursor:pointer;}div:active{พื้นหลัง:orange;สี:สีขาว;}</style></head><body><div> ปุ่ม</div></body></html>:จุดสนใจ
:focus ใช้เพื่อจัดรูปแบบเอฟเฟกต์เมื่อองค์ประกอบอเนกประสงค์กลายเป็นโฟกัส ซึ่งมักใช้กับองค์ประกอบการควบคุมแบบฟอร์ม
รหัสโครงสร้าง:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title></head><body><formaction=#method=post><inputtype=text></form></ ร่างกาย></html>
เมื่อคุณต้องการให้อินพุตได้รับการโฟกัส สีพื้นหลังคือ #CCC และโค้ดการใช้งานคือ:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>forminput:โฟกัส{พื้นหลัง:#CCC;}</style></head><body><formaction =#method=post><inputtype=text></form></body></html>คุณสามารถดูเอฟเฟกต์สไตล์ของการเปลี่ยนสีพื้นหลังเป็นสีเป้าหมายหลังจากที่อินพุตได้รับการโฟกัส
สิ่งที่ควรทราบ:
(1) ตัวเลือกคลาสเทียมด้านบนเป็นไปตามหลักการลำดับ นั่นคือ ลิงก์ไปยังการเยี่ยมชมเพื่อโฮเวอร์ จากนั้นไปยังคลาสหลอกที่ใช้งานอยู่
(2) โฮเวอร์และแอคทีฟรวมอยู่ในหมวดหมู่หลอกพฤติกรรมผู้ใช้
ลูกคนแรก
pseudo-class first-child สามารถจับคู่อิลิเมนต์ลูกแรกภายใต้อิลิเมนต์พาเรนต์ที่ระบุได้ ตัวอย่างเช่น ul li:first-child สามารถจับคู่อิลิเมนต์ <li> แรกภายใต้อิลิเมนต์ <ul> โค้ดตัวอย่างจะเป็นดังนี้:
<!DOCTYPEhtml><html><head><style>ulli:first-child{/*จับคู่ <li>แท็กแรกภายใต้ <ul>*/color:red;}</style></head>< body> <ul><li>การเขียนโปรแกรม dotcpp</li><li>การเขียนโปรแกรม dotcpp</li><li>การเขียนโปรแกรม dotcpp</li></ul></body></html>ผลการวิ่ง:
ast-เด็ก
เช่นเดียวกับลูกคนแรก ลูกคนสุดท้ายคลาสหลอกสามารถจับคู่องค์ประกอบลูกสุดท้ายภายใต้องค์ประกอบหลักที่ระบุ ตัวอย่างเช่น ul li:last-child สามารถจับคู่องค์ประกอบ <li> สุดท้ายภายใต้องค์ประกอบ <ul> รหัสตัวอย่างจะเป็นดังนี้:
<!DOCTYPEhtml><html><head><style>ulli:last-child{/*จับคู่ <li>แท็กสุดท้ายใต้ <ul>*/color:red;}</style></head><body > <ul><li>การเขียนโปรแกรม dotcpp</li><li>การเขียนโปรแกรม dotcpp</li><li>การเขียนโปรแกรม dotcpp</li></ul></body></html>ผลการวิ่ง:
ลูกคนที่ n
คลาสหลอกที่ n-child เป็นคลาสใหม่ใน CSS3 มันสามารถจับคู่องค์ประกอบย่อยที่ n ภายใต้องค์ประกอบที่ระบุได้ ตัวอย่างเช่น ul li:nth-child(2) สามารถจับคู่องค์ประกอบ <li> ที่สองภายใต้องค์ประกอบ <ul> . โค้ดตัวอย่างจะเป็นดังนี้:
<!DOCTYPEhtml><html><head><style>ulli:nth-child(2){/*จับคู่ <li>แท็กที่สองภายใต้ <ul>*/color:red;}</style></ head> <body><ul><li>การเขียนโปรแกรม dotcpp</li><li>การเขียนโปรแกรม dotcpp</li><li>การเขียนโปรแกรม dotcpp</li></ul></body></html>ผลการวิ่ง:
