CSS - คลาสหลอก

CSS หลอกคลาสใช้เพื่อเพิ่มลักษณะพิเศษให้กับตัวเลือกบางตัว คุณไม่จำเป็นต้องใช้ JavaScript หรือสคริปต์อื่นใดเพื่อใช้เอฟเฟกต์เหล่านั้น ไวยากรณ์ง่ายๆของคลาสหลอกมีดังนี้ -

selector:pseudo-class {property: value}

คลาส CSS สามารถใช้กับคลาสหลอกได้เช่นกัน -

selector.class:pseudo-class {property: value}

คลาสหลอกที่ใช้บ่อยที่สุดมีดังนี้ -

ซีเนียร์	มูลค่าและรายละเอียด
1	:link ใช้คลาสนี้เพื่อเพิ่มสไตล์พิเศษให้กับลิงก์ที่ไม่ได้เยี่ยมชม
2	:visited ใช้คลาสนี้เพื่อเพิ่มสไตล์พิเศษให้กับลิงก์ที่เยี่ยมชม
3	:hover ใช้คลาสนี้เพื่อเพิ่มสไตล์พิเศษให้กับองค์ประกอบเมื่อคุณวางเมาส์เหนือมัน
4	:active ใช้คลาสนี้เพื่อเพิ่มสไตล์พิเศษให้กับองค์ประกอบที่ใช้งานอยู่
5	:focus ใช้คลาสนี้เพื่อเพิ่มสไตล์พิเศษให้กับองค์ประกอบในขณะที่องค์ประกอบมีโฟกัส
6	:first-child ใช้คลาสนี้เพื่อเพิ่มสไตล์พิเศษให้กับองค์ประกอบที่เป็นลูกคนแรกขององค์ประกอบอื่น ๆ
7	:lang ใช้คลาสนี้เพื่อระบุภาษาที่จะใช้ในองค์ประกอบที่ระบุ

ในขณะที่กำหนดคลาสหลอกในบล็อก <style> ... </style> ควรสังเกตประเด็นต่อไปนี้ -

a: hover ต้องอยู่หลังลิงก์: และ a: เยี่ยมชมในคำจำกัดความของ CSS เพื่อให้มีประสิทธิภาพ
a: active ต้องอยู่หลัง a: วางเมาส์เหนือคำจำกัดความของ CSS เพื่อให้มีประสิทธิภาพ
ชื่อคลาสหลอกไม่คำนึงถึงขนาดตัวพิมพ์
Pseudo-class แตกต่างจากคลาส CSS แต่สามารถรวมกันได้

ลิงก์หลอกคลาส

ตัวอย่างต่อไปนี้สาธิตวิธีการใช้: link class เพื่อกำหนดสีของลิงค์ ค่าที่เป็นไปได้อาจเป็นชื่อสีใดก็ได้ในรูปแบบที่ถูกต้อง

<html>
   <head>
      <style type = "text/css">
         a:link {color:#000000}
      </style>
   </head>

   <body>
      <a href = "">Black Link</a>
   </body>
</html>

มันจะสร้างลิงค์สีดำดังต่อไปนี้ -

The: เยี่ยมชมคลาสหลอก

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

<html>
   <head>
      <style type = "text/css">
         a:visited {color: #006600}
      </style>
   </head>

   <body>
      <a href = "">Click this link</a>
   </body>
</html>

สิ่งนี้จะสร้างลิงค์ต่อไปนี้ เมื่อคุณคลิกลิงก์นี้ลิงก์นี้จะเปลี่ยนสีเป็นสีเขียว

: hover pseudo-class

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการใช้: hover class เพื่อเปลี่ยนสีของลิงก์เมื่อเรานำตัวชี้เมาส์ไปที่ลิงก์นั้น ค่าที่เป็นไปได้อาจเป็นชื่อสีใดก็ได้ในรูปแบบที่ถูกต้อง

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "">Bring Mouse Here</a>
   </body>
</html>

มันจะสร้างลิงค์ต่อไปนี้ ตอนนี้คุณนำเมาส์ไปวางเหนือลิงค์นี้และคุณจะเห็นว่ามันเปลี่ยนสีเป็นสีเหลือง

: คลาสหลอกที่ใช้งานอยู่

ตัวอย่างต่อไปนี้สาธิตวิธีใช้:คลาสที่ใช้งานอยู่เพื่อเปลี่ยนสีของลิงก์ที่ใช้งานอยู่ ค่าที่เป็นไปได้อาจเป็นชื่อสีใดก็ได้ในรูปแบบที่ถูกต้อง

<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>

   <body>
      <a href = "">Click This Link</a>
   </body>
</html>

มันจะสร้างลิงค์ต่อไปนี้ เมื่อผู้ใช้คลิกสีจะเปลี่ยนเป็นสีชมพู

: โฟกัสหลอกคลาส

ตัวอย่างต่อไปนี้สาธิตวิธีใช้:คลาสโฟกัสเพื่อเปลี่ยนสีของลิงก์ที่โฟกัส ค่าที่เป็นไปได้อาจเป็นชื่อสีใดก็ได้ในรูปแบบที่ถูกต้อง

<html>
   <head>
      <style type = "text/css">
         a:focus {color: #0000FF}
      </style>
   </head>

   <body>
      <a href = "">Click this Link</a>
   </body>
</html>

มันจะสร้างลิงค์ต่อไปนี้ เมื่อลิงก์นี้ถูกโฟกัสสีของลิงก์จะเปลี่ยนเป็นสีส้ม สีจะเปลี่ยนกลับเมื่อสูญเสียโฟกัส

: คลาสหลอกเด็กคนแรก

: ครั้งแรกที่เด็กหลอกชั้นตรงกับองค์ประกอบที่ระบุว่าเป็นลูกคนแรกขององค์ประกอบอื่นและเพิ่มรูปแบบพิเศษเพื่อองค์ประกอบที่เป็นลูกคนแรกขององค์ประกอบอื่น ๆ

สิ่งที่ต้องทำ: ต้องประกาศการทำงานของลูกคนแรกใน IE <! DOCTYPE> ที่ด้านบนของเอกสาร

ตัวอย่างเช่นหากต้องการเยื้องย่อหน้าแรกขององค์ประกอบ <div> ทั้งหมดคุณสามารถใช้คำจำกัดความนี้ -

<html>
   <head>
      <style type = "text/css">
         div > p:first-child {
            text-indent: 25px;
         }
      </style>
   </head>

   <body>
   
      <div>
         <p>First paragraph in div. This paragraph will be indented</p>
         <p>Second paragraph in div. This paragraph will not be indented</p>
      </div>
      <p>But it will not match the paragraph in this HTML:</p>
      
      <div>
         <h3>Heading</h3>
         <p>The first paragraph inside the div. This paragraph will not be effected.</p>
      </div>
      
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

: lang pseudo-class

ภาษา pseudo-class : langอนุญาตให้สร้างตัวเลือกตามการตั้งค่าภาษาสำหรับแท็กเฉพาะ

คลาสนี้มีประโยชน์ในเอกสารที่ต้องดึงดูดหลายภาษาที่มีรูปแบบที่แตกต่างกันสำหรับโครงสร้างภาษาบางรูปแบบ ตัวอย่างเช่นภาษาฝรั่งเศสมักใช้วงเล็บมุม (<and>) เพื่อจุดประสงค์ในการอ้างอิงในขณะที่ภาษาอังกฤษใช้เครื่องหมายคำพูด ('และ')

ในเอกสารที่ต้องการระบุความแตกต่างนี้คุณสามารถใช้: lang pseudo-class เพื่อเปลี่ยนเครื่องหมายคำพูดให้เหมาะสม โค้ดต่อไปนี้เปลี่ยนแท็ก <blockquote> ให้เหมาะสมกับภาษาที่ใช้ -

<html>
   <head>
      <style type = "text/css">
         
         /* Two levels of quotes for two languages*/
         :lang(en) { quotes: '"' '"'  "'"  "'"; }
         :lang(fr) { quotes: "<<" ">>" "<" ">"; }
      </style>
   </head>
   
   <body>
      <p>...<q lang = "fr">A quote in a paragraph</q>...</p>
   </body>
</html>

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

มันจะให้ผลลัพธ์ดังต่อไปนี้ -