สิ่งที่ชอบa:linkหรือdiv::after...

ข้อมูลเกี่ยวกับความแตกต่างดูเหมือนจะหายาก

คำแนะนำเลือก CSS 3สวยชัดเจนเกี่ยวกับทั้งสอง แต่ฉันจะพยายามที่จะแสดงความแตกต่างอยู่แล้ว

หลอกเรียน

คำอธิบายอย่างเป็นทางการ

แนวคิดคลาสหลอกถูกนำมาใช้เพื่ออนุญาตให้มีการเลือกตามข้อมูลที่อยู่นอกโครงสร้างเอกสารหรือที่ไม่สามารถแสดงโดยใช้ตัวเลือกอื่น ๆ

คลาสหลอกมักประกอบด้วย "โคลอน" ( :) ตามด้วยชื่อของคลาสหลอกและสามารถเลือกได้ด้วยค่าระหว่างวงเล็บ

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

ที่มา

สิ่งนี้หมายความว่า?

ลักษณะสำคัญของการหลอกชั้นเรียนคือที่ระบุไว้ในประโยคแรกมาก: "แนวคิดหลอกชั้น [ ... ] เลือกใบอนุญาต " ช่วยให้ผู้เขียนสไตล์ชีตแตกต่างกันระหว่างองค์ประกอบตามข้อมูลที่"อยู่นอกโครงสร้างเอกสาร"ตัวอย่างเช่นสถานะปัจจุบันของลิงก์ ( :active, :visited) สิ่งเหล่านี้ไม่ได้บันทึกไว้ที่ใดก็ได้ใน DOM และไม่มีอินเทอร์เฟซ DOM สำหรับเข้าถึงตัวเลือกเหล่านี้

บนมืออื่น ๆ ที่:targetสามารถเข้าถึงได้ผ่านการจัดการ DOM (คุณสามารถใช้window.location.hashเพื่อหาวัตถุที่มีจาวาสคริปต์) แต่ตอนนี้ "ไม่สามารถแสดงโดยใช้ตัวเลือกอื่น ๆ ที่เรียบง่าย"

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

ตัวอย่าง

ตัวอย่างต่อไปนี้จะทำให้ทุกแถวเป็นสีเทา ( #ccc) แถวที่ไม่เท่ากันทั้งหมดซึ่งไม่สามารถหารด้วยสีขาว 5 แถวและสีม่วงแดงทุกแถว

table tr:nth-child(2n) td{
   background-color: #ccc;
}

table tr:nth-child(2n+1) td{
   background-color: #fff;
}

table tr:nth-child(2n+1):nth-child(5n) td{
   background-color: #f0f;
}

องค์ประกอบหลอก

คำอธิบายอย่างเป็นทางการ

องค์ประกอบหลอกสร้างนามธรรมเกี่ยวกับโครงสร้างเอกสารนอกเหนือจากที่ระบุโดยภาษาเอกสาร ตัวอย่างเช่นภาษาเอกสารไม่มีกลไกในการเข้าถึงตัวอักษรตัวแรกหรือบรรทัดแรกของเนื้อหาขององค์ประกอบ องค์ประกอบหลอกช่วยให้ผู้เขียนอ้างถึงข้อมูลที่ไม่สามารถเข้าถึงได้ องค์ประกอบหลอกอาจช่วยให้ผู้เขียนสามารถอ้างถึงเนื้อหาที่ไม่มีอยู่ในเอกสารต้นฉบับได้ (เช่น::beforeและ::afterองค์ประกอบหลอกให้การเข้าถึงเนื้อหาที่สร้างขึ้น)

องค์ประกอบหลอกประกอบด้วยสองโคลอน ( ::) ตามด้วยชื่อขององค์ประกอบหลอก

นี้::สัญกรณ์เป็นที่รู้จักโดยเอกสารปัจจุบันเพื่อสร้างการเลือกปฏิบัติระหว่างหลอกชั้นเรียนและหลอกองค์ประกอบ เพื่อให้เข้ากันได้กับสไตล์ชีตที่มีอยู่ตัวแทนผู้ใช้ต้องยอมรับสัญกรณ์หนึ่งโคลอนก่อนหน้าสำหรับองค์ประกอบหลอกที่นำมาใช้ใน CSS ระดับ 1 และ 2 (กล่าวคือ: บรรทัดแรก,: อักษรตัวแรก,: ก่อนและ: หลัง) ความเข้ากันได้นี้ไม่ได้รับอนุญาตสำหรับองค์ประกอบหลอกใหม่ที่นำมาใช้ในข้อกำหนดนี้

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

หมายเหตุ: เวอร์ชันในอนาคตของข้อกำหนดนี้อาจอนุญาตให้มีองค์ประกอบหลอกหลายรายการต่อตัวเลือก

ที่มา

สิ่งนี้หมายความว่า?

ส่วนที่สำคัญที่สุดคือ"องค์ประกอบหลอกอนุญาตให้ผู้เขียนอ้างถึง [.. ] มิฉะนั้นข้อมูลที่ไม่สามารถเข้าถึงได้ "และพวกเขา"อาจให้วิธีการอ้างถึงเนื้อหาที่ไม่มีอยู่ในเอกสารต้นฉบับแก่ผู้เขียน (เช่น::beforeและ::afterองค์ประกอบหลอกให้เข้าถึงเนื้อหาที่สร้างขึ้น) ". ความแตกต่างที่ใหญ่ที่สุดคือพวกเขาสร้างองค์ประกอบเสมือนใหม่ที่สามารถใช้กฎและแม้แต่ตัวเลือกคลาสหลอกได้ พวกเขาไม่ได้กรององค์ประกอบโดยทั่วไปจะกรองเนื้อหา ( ::first-line, ::first-letter) และรวมไว้ในคอนเทนเนอร์เสมือนซึ่งผู้เขียนสามารถจัดรูปแบบได้ตามที่เขาต้องการ (ดีเกือบ)

ตัวอย่างเช่น::first-lineองค์ประกอบหลอกไม่สามารถสร้างขึ้นใหม่ด้วย JavaScript ได้เนื่องจากขึ้นอยู่กับแบบอักษรที่ใช้ในปัจจุบันขนาดแบบอักษรความกว้างขององค์ประกอบองค์ประกอบแบบลอยตัว (และอาจเป็นเวลาของวัน) นั่นไม่เป็นความจริงทั้งหมด: เรายังคงสามารถคำนวณค่าเหล่านั้นทั้งหมดและแยกบรรทัดแรกได้อย่างไรก็ตามการทำเช่นนั้นเป็นกิจกรรมที่ยุ่งยากมาก

ฉันเดาว่าข้อแตกต่างที่ใหญ่ที่สุดคือ "เพียงหนึ่งองค์ประกอบหลอกอาจปรากฏต่อตัวเลือก" บันทึกกล่าวว่าสิ่งนี้อาจเปลี่ยนแปลงได้ แต่ ณ ปี 2555 ฉันไม่เชื่อว่าเราจะเห็นพฤติกรรมที่แตกต่างออกไปในอนาคต ( ยังอยู่ใน CSS4 )

ตัวอย่าง

ตัวอย่างต่อไปนี้จะเพิ่มแท็กภาษาให้กับทุกคำพูดในหน้าที่กำหนดโดยใช้คลาส:langหลอกและองค์ประกอบหลอก::after :

q:lang(de)::after{
    content: " (German) ";
}

q:lang(en)::after{
    content: " (English) ";
}

q:lang(fr)::after{
    content: " (French) ";
}

q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{
    content: " (Unrecognized language) ";
}

TL; ดร

คลาสหลอกทำหน้าที่เป็นตัวเลือกอย่างง่ายในลำดับของตัวเลือกและด้วยเหตุนี้จึงจัดประเภทองค์ประกอบตามลักษณะที่ไม่ใช่การนำเสนอองค์ประกอบหลอกจะสร้างองค์ประกอบเสมือนใหม่

อ้างอิง

W3C

• ตัวเลือกระดับ 3
  • 4. ไวยากรณ์ตัวเลือก
  • 6.6 คลาสหลอก
  • 7. องค์ประกอบหลอก
• ข้อกำหนด CSS 2.1 (ล้าสมัย แต่ยังให้ข้อมูล)
  • 5.2 ไวยากรณ์ตัวเลือก :

    ตัวเลือกแบบง่ายคือตัวเลือกประเภทหรือตัวเลือกสากลตามด้วยตัวเลือกแอตทริบิวต์ศูนย์หรือมากกว่าตัวเลือก ID หรือคลาสหลอกในลำดับใดก็ได้ ตัวเลือกแบบง่ายจะจับคู่หากส่วนประกอบทั้งหมดตรงกัน

  • 5.10 องค์ประกอบหลอกและคลาสหลอก

คลาสหลอกจะกรององค์ประกอบที่มีอยู่
a:linkหมายถึงทั้งหมด<a>ที่มี:linkวินาทีที่มี

องค์ประกอบหลอกคือองค์ประกอบปลอมใหม่
div::afterหมายถึงองค์ประกอบที่ไม่มีอยู่หลัง<div> s

::selectionเป็นอีกตัวอย่างหนึ่งขององค์ประกอบหลอก
ไม่ได้หมายถึงองค์ประกอบทั้งหมดที่เลือก หมายถึงช่วงของเนื้อหาที่ถูกเลือกซึ่งอาจครอบคลุมบางส่วนของหลายองค์ประกอบ

คำอธิบายสั้น ๆ ที่ช่วยให้ฉันเข้าใจความแตกต่าง:

• Pseudo-class อธิบายสถานะพิเศษ
• องค์ประกอบหลอกจับคู่องค์ประกอบเสมือนจริง

จากเอกสาร Sitepoint:

หลอกชั้นคล้ายกับชั้นใน HTML แต่ก็ไม่ได้ระบุไว้อย่างชัดเจนในมาร์กอัป คลาสหลอกบางคลาสเป็นแบบไดนามิกซึ่งใช้เนื่องจากการโต้ตอบของผู้ใช้กับเอกสาร - http://reference.sitepoint.com/css/pseudoclasses :hover, :active, :visitedเหล่านี้จะเป็นสิ่งที่ชอบ

องค์ประกอบหลอกจับคู่องค์ประกอบเสมือนที่ไม่มีอยู่อย่างชัดเจนในโครงสร้างเอกสาร องค์ประกอบหลอกสามารถเป็นแบบไดนามิกได้เช่นเดียวกับองค์ประกอบเสมือนจริงที่แสดงถึงสามารถเปลี่ยนแปลงได้ตัวอย่างเช่นเมื่อความกว้างของหน้าต่างเบราว์เซอร์เปลี่ยนแปลง นอกจากนี้ยังสามารถแสดงเนื้อหาที่สร้างขึ้นโดยกฎ CSS - http://reference.sitepoint.com/css/pseudoelements before, :after, :first-letterเหล่านี้จะเป็นสิ่งที่ชอบ

ด้านล่างนี้คือคำตอบง่ายๆ:

เราใช้คลาสหลอกเมื่อเราต้องการใช้ css ตามสถานะขององค์ประกอบ เช่น:

1. ใช้ css บนโฮเวอร์ขององค์ประกอบจุดยึด (:hover )
2. ใช้ css เมื่อได้รับการโฟกัสที่องค์ประกอบ html ( :focus) เป็นต้น

เราใช้องค์ประกอบหลอกเมื่อเราต้องการที่จะใช้ CSS ไปเฉพาะส่วนขององค์ประกอบหรือเพิ่งเนื้อหาแทรก เช่น:

1. นำ css ไปใช้กับอักษรตัวแรกหรือบรรทัดแรกขององค์ประกอบ (::first-letter )
2. แทรกเนื้อหาก่อนหรือหลังเนื้อหาขององค์ประกอบ ( ::before, ::after)

ด้านล่างนี้เป็นตัวอย่างของทั้งสอง:

<html>

 <head>
   <style>
   p::first-letter {  /* pseudo-element */
     color: #ff0000;
   }

   a:hover {          /* pseudo-class */
     color: red;      
   }
   </style>
 </head>

 <body>
   <a href="#" >This is a link</a>
   <p>This is a paragraph.</p>
 </body>

</html>

คำตอบตามแนวคิด:

• องค์ประกอบหลอกหมายถึงสิ่งต่างๆที่เป็นส่วนหนึ่งของเอกสาร แต่คุณยังไม่รู้ ตัวอย่างเช่นตัวอักษรตัวแรก ก่อนหน้านี้คุณมีเพียงข้อความ ตอนนี้คุณมีตัวอักษรตัวแรกที่กำหนดเป้าหมายได้ เป็นแนวคิดใหม่ แต่เป็นส่วนหนึ่งของเอกสารเสมอ นอกจากนี้ยังรวมถึงสิ่งต่างๆเช่น::before; แม้ว่าจะไม่มีเนื้อหาที่แท้จริง แต่แนวคิดของบางสิ่งมาก่อนสิ่งอื่นก็มีอยู่เสมอ - ตอนนี้คุณกำลังระบุ

• คลาสหลอกคือสถานะของบางสิ่งใน DOM เช่นเดียวกับคลาสคือแท็กที่คุณเชื่อมโยงกับองค์ประกอบคลาสหลอกคือคลาสที่ได้รับการเชื่อมโยงโดยเบราว์เซอร์หรือ DOM หรืออะไรก็ตามโดยปกติจะเป็นการตอบสนองต่อการเปลี่ยนแปลงสถานะ เมื่อผู้ใช้เยี่ยมชมลิงก์ลิงก์นั้นอาจอยู่ในสถานะ "เยี่ยมชม" คุณสามารถจินตนาการได้ว่าเบราว์เซอร์ใช้คลาส 'เยี่ยม' กับองค์ประกอบ Anchor :visitedจากนั้นจะเป็นวิธีที่คุณเลือกสำหรับคลาสหลอกนั้น

หลอกคลาส

คลาสหลอกเป็นวิธีการเลือกบางส่วนของเอกสาร HTML โดยยึดหลักการไม่ได้อยู่บนโครงสร้างเอกสาร HTML และองค์ประกอบหรือลักษณะเช่นชื่อคุณลักษณะหรือเนื้อหา แต่อยู่ในเงื่อนไขหลอนอื่น ๆ เช่นการเข้ารหัสภาษาหรือสถานะไดนามิก ขององค์ประกอบ

สถานะไดนามิกคลาสหลอกดั้งเดิมที่กำหนดไว้ขององค์ประกอบที่ป้อนและออกเมื่อเวลาผ่านไปหรือผ่านการแทรกแซงของผู้ใช้ CSS2 ขยายแนวคิดนี้เพื่อรวมส่วนประกอบเอกสารแนวความคิดเสมือนหรือส่วนที่อนุมานของโครงสร้างเอกสารเช่นลูกคนแรก Pseudo-class ทำงานราวกับว่ามีการเพิ่มคลาส phantom เข้าไปในองค์ประกอบต่างๆ

ข้อ จำกัด : ไม่เหมือนกับองค์ประกอบหลอกคลาสหลอกสามารถปรากฏที่ใดก็ได้ในห่วงโซ่ตัวเลือก

ตัวอย่างรหัสคลาสหลอก:

a:link /* This selects any "a" element whose target has not been visited.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #99FF99; /* set to a pastel green */
border-top : 2px solid #ccffcc; /* highlight color */
border-left : 2px solid #ccffcc; /* highlight color */
border-bottom : 2px solid #003300; /* shadow color */
border-right : 2px solid #003300; /* shadow color */
}

a:visited /* This selects any "a" element whose target has been visited.*/
{ padding : 4px;
text-decoration : none;
color : #000000; /* black text color */
background-color : #ccccff; /* set to a lavender */
border-top : 2px solid #ffffff; /* highlight color */
border-left : 2px solid #ffffff; /* highlight color */
border-bottom : 2px solid #333366; /* shadow color *
border-right : 2px solid #333366; /* shadow color */
}

a:hover /* This selects any "a" element which is in a hover state. This is a state during pointer movement within the rendering region of an element. The user designates an element but does not activate it. */
{
color : #000000; /* black text color */
background-color : #99cc99; /* desaturated color */
border-top : 2px solid #003300; /* shadow color */
border-left : 2px solid #003300; /* shadow color */
border-bottom : 2px solid #ccffcc; /* highlight color */
border-right : 2px solid #ccffcc; /* highlight color */
}

a:focus /* This selects any "a" element which currently has focus. Focus is a state during which an element accepts keyboard input or other forms of text input. */
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ffff99; /* set to a pastel yellow */
border-top : 2px solid #ffffcc; /* highlight color */
border-left : 2px solid #ffffcc; /* highlight color */
border-bottom : 2px solid #666633; /* shadow color */
border-right : 2px solid #666633; /* shadow color */
}

a:active /* This selects any "a" element which is in a state of activation. Active is a state during pointer activation (eg: press and release of a mouse) within the rendering region of an element.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ff99ff; /* set to a pink */
border-top : 2px solid #ffccff; /* highlight color */
border-left : 2px solid #ffccff; /* highlight color */
border-bottom : 2px solid #663366; /* shadow color */
border-right : 2px solid #663366; /* shadow color */
}

หน้าที่แสดงการเรนเดอร์โค้ดคลาสหลอกข้างต้น

องค์ประกอบหลอก

PSEUDO-ELEMENTS ใช้เพื่อจัดการกับส่วนย่อยขององค์ประกอบ ช่วยให้คุณสามารถกำหนดสไตล์ในส่วนหนึ่งของเนื้อหาขององค์ประกอบนอกเหนือจากที่ระบุไว้ในเอกสาร กล่าวอีกนัยหนึ่งคืออนุญาตให้กำหนดองค์ประกอบเชิงตรรกะซึ่งไม่ได้อยู่ในโครงสร้างองค์ประกอบเอกสาร องค์ประกอบเชิงตรรกะช่วยให้สามารถระบุโครงสร้างความหมายโดยนัยได้ในตัวเลือก CSS

ข้อ จำกัด : องค์ประกอบหลอกสามารถใช้ได้กับบริบทภายนอกและระดับเอกสารเท่านั้นไม่ใช่กับสไตล์ในบรรทัด องค์ประกอบหลอกถูก จำกัด ในที่ที่สามารถปรากฏในกฎได้ อาจปรากฏที่ส่วนท้ายของห่วงโซ่ตัวเลือกเท่านั้น (หลังหัวเรื่องของตัวเลือก) ควรอยู่หลังชื่อคลาสหรือ ID ที่พบในตัวเลือก สามารถระบุองค์ประกอบหลอกได้เพียงหนึ่งรายการต่อตัวเลือก ในการจัดการกับองค์ประกอบหลอกหลายรายการบนโครงสร้างองค์ประกอบเดียวต้องทำคำสั่งตัวเลือก / ประกาศหลายสไตล์

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

/ * กฎต่อไปนี้จะเลือกอักษรตัวแรกของหัวเรื่อง 1 และตั้งค่าแบบอักษรเป็น 2em เล่นหางโดยมีพื้นหลังสีเขียว อักษรตัวแรกเลือกตัวอักษร / อักขระที่แสดงผลตัวแรกสำหรับองค์ประกอบระดับบล็อก * /

h1:first-letter {
font-size : 2em;
font-family : "Lucida Handwriting", "Lucida Sans", "Lucida Console", cursive;
background-color : #ccffcc;
}

/* The following rule selects the first displayed line in a paragraph and makes it bold. First-line selects the first rendered line on the output device of a block-level element. */

p:first-line {
font-weight : bold;
}

/* The following rule selects any content placed before a blockquote and inserts the phrase "Quote of the day:" in bold small caps with a green background. */

blockquote:before {
content : "Quote of the day:";
background-color : #ccffcc;
font-weight : bold;
font-variant : small-caps;
}

/* The following rule selects any content placed before a "q" element and inserts the smart open quote. */

q:before {
content : open-quote;
}

/* The following rule selects any content placed after a "q" element and inserts the smart close quote. */

q:after{
content : close-quote;
}

แหล่งที่มา: ลิงค์

โดยสังเขปจากPseudo-classesบน MDN:

CSS pseudo-classคือคีย์เวิร์ดที่เพิ่มเข้าไปในตัวเลือกที่ระบุสถานะพิเศษขององค์ประกอบที่เลือก ตัวอย่างเช่น,:hover สามารถใช้เพื่อใช้สไตล์เมื่อผู้ใช้วางเมาส์เหนือปุ่ม

div: hover {
  สีพื้นหลัง: # F89B4D;
}

และจากองค์ประกอบ Pseudoบน MDN:

CSS pseudo-elementคือคีย์เวิร์ดที่เพิ่มเข้าไปในตัวเลือกที่ช่วยให้คุณสามารถจัดรูปแบบส่วนเฉพาะขององค์ประกอบที่เลือกได้ ตัวอย่างเช่น ::first-lineสามารถใช้เพื่อจัดรูปแบบบรรทัดแรกของย่อหน้า

/ * บรรทัดแรกของทุก ๆ <p> องค์ประกอบ * /
p :: บรรทัดแรก {
 สี: ฟ้า;
 แปลงข้อความ: ตัวพิมพ์ใหญ่;
}