คู่มือการแตกหักสำหรับ CSS Pseudo-Classes
ไม่ว่าคุณจะเป็นมือใหม่หรือนักพัฒนา CSS ที่มีประสบการณ์คุณอาจเคยได้ยิน หลอกชั้นเรียน. คลาสหลอกที่รู้จักกันดีที่สุดน่าจะเป็น : เลื่อน, ซึ่งทำให้เราสามารถจัดองค์ประกอบเป็นองค์ประกอบได้ ในสถานะโฮเวอร์, เช่นเมื่ออุปกรณ์ตัวชี้เช่นเมาส์ชี้ไปที่มัน.
ตามแนวคิดของการโพสต์ก่อนหน้านี้ของเราบนระยะขอบ: อัตโนมัติและ CSS Floats เราจะพิจารณาเชิงลึกเพิ่มเติมเกี่ยวกับคลาสหลอกในโพสต์นี้ เราจะได้เห็น สิ่งที่เป็นคลาสหลอกจริงๆ, พวกมันทำงานอย่างไรเราสามารถจัดหมวดหมู่พวกมันและ แตกต่างจากองค์ประกอบหลอกอย่างไร.
Pseudo-Classes คืออะไร?
คลาสหลอกเป็นคำหลักที่เราสามารถเพิ่มลงใน CSS selectors เพื่อ กำหนดสถานะพิเศษ ขององค์ประกอบ HTML ที่เป็นของ เราสามารถเพิ่มคลาส pseudo ให้กับตัวเลือก CSS โดยใช้ ไวยากรณ์ลำไส้ใหญ่ : อย่างนี้: a: hover …
คลาส CSS เป็นคุณสมบัติที่เราสามารถเพิ่มองค์ประกอบ HTML ที่เราต้องการใช้กฎสไตล์เดียวกันสำหรับเช่นรายการเมนูด้านบนหรือชื่อของวิดเจ็ตแถบด้านข้าง กล่าวอีกนัยหนึ่งเราสามารถใช้คลาส CSS เพื่อ กลุ่มหรือจำแนกองค์ประกอบ HTML ที่คล้ายกันไม่ทางใดก็ทางหนึ่ง.
Pseudo-classes นั้นคล้ายกับพวกมันในแง่ที่ว่าพวกมันเป็นเช่นนั้นด้วย ใช้เพื่อเพิ่มกฎสไตล์ให้กับองค์ประกอบที่ใช้คุณสมบัติเดียวกัน.
แต่ในขณะที่ชั้นเรียนของแท้นั้น ที่ผู้ใช้กำหนด และ สามารถเห็นได้ในซอร์สโค้ด, เช่น งานของคลาส CSS ปกติ คือการ จำแนกหรือจัดกลุ่มองค์ประกอบ. นักพัฒนารู้ว่าองค์ประกอบของพวกเขาจะถูกจัดกลุ่มอย่างไร: พวกเขาสามารถสร้างคลาสเช่น "เมนูรายการ", "ปุ่ม", "รูปขนาดย่อ" ฯลฯ เพื่อจัดกลุ่มและลักษณะองค์ประกอบที่คล้ายกันในภายหลัง การจำแนกประเภทเหล่านี้ขึ้นอยู่กับคุณสมบัติขององค์ประกอบที่เป็น กำหนดโดยนักพัฒนาเอง. ตัวอย่างเช่นหากนักพัฒนาตัดสินใจที่จะใช้ อย่างไรก็ตามองค์ประกอบ HTML มี ลักษณะทั่วไปของตัวเอง ขึ้นอยู่กับสถานะตำแหน่งลักษณะและการโต้ตอบกับหน้าและผู้ใช้ เหล่านี้เป็นลักษณะที่ ไม่ โดยทั่วไปจะมีการทำเครื่องหมายในรหัส HTML, แต่เราทำได้ กำหนดเป้าหมายด้วยคลาส pseudo ใน CSS ตัวอย่างเช่น: นี่เป็นลักษณะที่เป็นเป้าหมายของคลาสหลอก เพื่อให้เข้าใจถึงความแตกต่างระหว่างคลาสและคลาสหลอกได้ดีกว่าสมมติว่าเรากำลังใช้คลาส เราสามารถจัดวางองค์ประกอบย่อยสุดท้ายเหล่านี้ด้วย CSS ต่อไปนี้: แต่จะเกิดอะไรขึ้นเมื่อองค์ประกอบสุดท้ายเปลี่ยนไป เราจะต้องย้าย ความยุ่งยากนี้ คลาสการอัพเดตสามารถปล่อยให้เอเจนต์ผู้ใช้, อย่างน้อยสำหรับคุณสมบัติเหล่านั้นที่ใช้ร่วมกันระหว่างองค์ประกอบต่างๆ (และการเป็นองค์ประกอบสุดท้ายนั้นเป็นเรื่องธรรมดาที่สุดเท่าที่จะทำได้). มี ที่กำหนดไว้ล่วงหน้า มีคลาส pseudo หลายประเภทซึ่งทั้งหมดนี้ให้วิธีในการกำหนดเป้าหมายองค์ประกอบตามคุณลักษณะที่ไม่สามารถเข้าถึงหรือเข้าถึงได้ยากกว่า นี่คือรายการของคลาสหลอกมาตรฐานใน MDN. คลาส pseudo-Dynamic จะถูกเพิ่มและลบออกจากองค์ประกอบ HTML แบบไดนามิก, ขึ้นอยู่กับสถานะที่พวกเขาเปลี่ยนเป็น เพื่อตอบสนองต่อการโต้ตอบของผู้ใช้. ตัวอย่างบางส่วนของคลาสหลอกหลอกแบบไดนามิกคือ คลาส pseudo-based ของรัฐจะถูกเพิ่มเข้าไปในองค์ประกอบเมื่อมี ในสถานะคงที่โดยเฉพาะ. ตัวอย่างที่รู้จักกันดีที่สุดบางตัวอย่าง ได้แก่ : คลาสปลอมที่ได้รับความนิยมมากที่สุดต้องเป็นของรัฐ โครงสร้างคลาสหลอกจัดองค์ประกอบตาม ในตำแหน่งของพวกเขาในโครงสร้างเอกสาร. ตัวอย่างที่พบบ่อยที่สุดคือ นอกจากนี้ยังมีคลาสหลอกอื่น ๆ ที่ยากต่อการจำแนกเช่น: หนึ่งในสิ่งที่ยากที่สุดเกี่ยวกับคลาสหลอกอาจจะเข้าใจความแตกต่างระหว่าง ทั้งสองเป็นคลาสหลอกแบบโครงสร้างและทำเครื่องหมาย องค์ประกอบเฉพาะภายในองค์ประกอบหลัก (คอนเทนเนอร์) แต่แตกต่างกัน. สมมติ n คือ 2 จากนั้น ลองมาดูตัวอย่าง. เรามาดูกันว่า CSS สั้น ๆ นี้สไตล์อย่างไรในสองกรณีที่แตกต่างกัน. ในกรณีที่ 1 องค์ประกอบที่สองภายใน แต่ถ้าองค์ประกอบหลัก ทำ มีย่อหน้าที่สอง ในตัวอย่างของเรา ย่อหน้า 1 ลูก 1 ย่อหน้าที่ 2 ลูก 3 ในกรณีที่สองเราย้ายรายการที่ไม่ได้เรียงลำดับไปยังตำแหน่งที่สามและวรรคที่สองจะมาก่อน ซึ่งหมายความว่าทั้ง ย่อหน้า 1 ลูก 1 ย่อหน้าที่ 2 ลูก 2 หากคุณต้องการอ่านเพิ่มเติมเกี่ยวกับความแตกต่างระหว่าง เมื่อเราพูดถึงคลาสหลอกก็สำคัญที่ต้องเข้าใจ แตกต่างจากองค์ประกอบหลอกอย่างไร, เพื่อไม่ให้เข้ากัน. แต่ในขณะที่เราใช้คลาสหลอกเพื่อเลือกองค์ประกอบ HTML ที่ มีอยู่ในทรีเอกสาร เพียงแค่ไม่ได้ทำเครื่องหมายแยกองค์ประกอบหลอกให้เรากำหนดเป้าหมายองค์ประกอบที่ ไม่ปกติมีอยู่ ใน DOM อย่างใดอย่างหนึ่ง (เช่น นอกจากนี้ยังมี ความแตกต่างในไวยากรณ์. องค์ประกอบแบบหลอกมักถูกระบุด้วยโคลอนคู่ สิ่งนี้อาจนำไปสู่กรณีของความสับสนเช่นเดียวกับใน CSS2 องค์ประกอบหลอกถูกทำเครื่องหมายด้วยเครื่องหมายโคลอนเดียวเช่นกัน - เบราว์เซอร์ยังคงยอมรับไวยากรณ์ของโคลอนเดียวสำหรับองค์ประกอบหลอก. นอกจากนี้ยังมีความแตกต่างระหว่างคลาสหลอกและองค์ประกอบหลอกใน วิธีที่เราสามารถกำหนดเป้าหมายด้วย CSS. องค์ประกอบ Pseudo สามารถปรากฏได้เท่านั้น หลังจาก ลำดับของตัวเลือกในขณะที่คลาสหลอกสามารถวางที่ใดก็ได้ในลำดับตัวเลือก CSS. ตัวอย่างเช่นคุณสามารถกำหนดเป้าหมายรายการสุดท้ายขององค์ประกอบรายการเช่น หรือ ลำดับแรกของตัวเลือกจะเลือกลูกคนสุดท้ายใน ลองทำสิ่งที่คล้ายกับองค์ประกอบหลอก. รหัส CSS ด้านบนนั้นถูกต้องและข้อความ "สีแดง" จะปรากฏขึ้น หลังจาก ในทางกลับกันรหัสนี้จะไม่ทำงานเหมือนที่เราเป็น ไม่สามารถเปลี่ยนตำแหน่งขององค์ประกอบเทียมได้ ภายในลำดับตัวเลือก. นอกจากนี้องค์ประกอบหลอกเดียวเท่านั้นที่สามารถปรากฏขึ้นข้างตัวเลือกในขณะที่คลาสหลอก สามารถใช้ร่วมกันได้ ถ้าการรวมกันทำให้รู้สึก ตัวอย่างเช่นในการกำหนดเป้าหมายองค์ประกอบย่อยแรกที่เป็นแบบอ่านอย่างเดียวเราสามารถสร้างการรวมกันของคลาสหลอกได้ รหัสตัวเลือกที่มี สิ่งสำคัญคือต้องรู้ว่า เหล่านี้คือ ไม่ CSS pseudo-classes ที่ถูกกำหนดเป้าหมายโดย jQuery พวกเขาเรียกว่าส่วนขยายตัวเลือก jQuery. ส่วนขยายตัวเลือก jQuery ช่วยให้คุณ กำหนดเป้าหมายองค์ประกอบ HTML ด้วยคำหลักที่ง่ายขึ้น. ส่วนใหญ่เป็นชุดของตัวเลือก CSS ปกติหลายชุดซึ่งแสดงด้วยคำหลักเดียว.วัตถุประสงค์ของคลาส Pseudo
.สุดท้าย เพื่อระบุองค์ประกอบสุดท้ายในภาชนะบรรจุหลัก.
li.last text-transform: ตัวพิมพ์ใหญ่; option.last แบบอักษร: ตัวเอียง;
.สุดท้าย ชั้นเรียนจากองค์ประกอบสุดท้ายที่ผ่านมาในปัจจุบัน.:ลูกคนสุดท้อง หลอกชั้น มีประโยชน์มากแน่นอน ด้วยวิธีนี้เรา ไม่จำเป็นต้องระบุองค์ประกอบสุดท้าย ใน HTML-code แต่เรายังคงสามารถจัดสไตล์ด้วย CSS ต่อไปนี้: li: ลูกคนสุดท้าย text-transform: ตัวพิมพ์ใหญ่; ตัวเลือก: ลูกคนสุดท้าย font-style: ตัวเอียง;
ประเภทหลักของ Pseudo-Classes
1. คลาส Pseudo แบบไดนามิก
: เลื่อน, : โฟกัส, : การเชื่อมโยง, และ : เยี่ยมชม, ทั้งหมดนี้สามารถเพิ่มลงใน แท็กสมอ. a: เยี่ยมชม color: # 8D20AE; .button: hover, .button: focus font-weight: bold;
2. การหลอกระดับรัฐ
: การตรวจสอบ ที่สามารถใช้สำหรับช่องทำเครื่องหมาย ():เต็มจอ เพื่อกำหนดเป้าหมายองค์ประกอบใด ๆ ที่กำลังแสดงอยู่ในโหมดเต็มหน้าจอ: คนพิการ สำหรับองค์ประกอบ HTML ที่สามารถอยู่ในโหมดปิดการใช้งานเช่น , , และ . : การตรวจสอบ, ซึ่งจะตั้งค่าสถานะว่ามีการทำเครื่องหมายในช่องหรือไม่. .ช่องทำเครื่องหมาย: ตรวจสอบ + ป้ายกำกับ แบบอักษร: ตัวเอียง; อินพุต: ปิดใช้งาน background-color: #EEEEEE;
3. โครงสร้างคลาสเทียม
: ครั้งแรกที่เด็ก, :ลูกคนสุดท้อง, และ : ที่ n-เด็ก (n) - ทั้งหมดสามารถใช้เพื่อกำหนดเป้าหมายองค์ประกอบย่อยเฉพาะภายในคอนเทนเนอร์ตามตำแหน่ง - และ :ราก ซึ่งกำหนดเป้าหมายองค์ประกอบหลักระดับสูงสุดใน DOM. 4. เบ็ดเตล็ด Pseudo-Classes
: ไม่ได้ (x) ซึ่งเลือกองค์ประกอบที่ไม่ตรงกับตัวเลือก x: lang (ภาษา code) ที่เลือกองค์ประกอบของเนื้อหาที่เป็นภาษาเฉพาะ: dir (ทิศทาง) ที่เลือกองค์ประกอบที่มีเนื้อหาของทิศทางที่กำหนด (จากซ้ายไปขวาหรือจากขวาไปซ้าย). p: lang (ko) background-color: # FFFF00; : root background-color: # FAEBD7;
ชับเด็ก VS ประเภทที่ หลอกเรียน
: ที่ n-เด็ก และ : ที่ n ของประเภท หลอกชั้นเรียน.: ที่ n ของเด็ก (n) กำหนดเป้าหมายองค์ประกอบที่เป็น ลูกที่สองขององค์ประกอบหลัก, และ : ที่ n ของประเภท (n) เป้าหมาย ครั้งที่สองในหมู่ ประเภทเดียวกัน ขององค์ประกอบ (เช่นย่อหน้า) ภายในองค์ประกอบหลัก. / * ย่อหน้าที่เป็นลูกคนที่สองในองค์ประกอบหลัก * / p: nth-child (2) color: # 1E90FF; // lightblue / * ย่อหน้าที่สองภายในองค์ประกอบหลัก * / p: nth-of-type (2) font-weight: bold;
กรณีที่ 1
ที่ n-เด็ก (2) กฎจะไม่ใช้กับมัน แม้ว่ามันจะเป็นลูกคนที่สองมันเป็น ไม่ ย่อหน้า. ที่ n ของประเภท (2) จะใช้กฎเนื่องจากกฎนี้จะมองหาเฉพาะ องค์ประกอบและไม่สนใจเรื่องอื่น ประเภท ขององค์ประกอบ (เช่นรายการที่ไม่ได้เรียงลำดับ) ภายในองค์ประกอบหลัก.ที่ n ของประเภท (2) กฎจะจัดรูปแบบย่อหน้าที่สองซึ่งเป็นลูก 3.
รายการที่ไม่เรียงลำดับ 1, เด็ก 2
กรณีที่ 2
: ที่ n-เด็ก (2) และ : ที่ n ของประเภท (2) กฎจะถูกนำมาใช้เนื่องจากวรรคสองเป็นลูกที่สองของผู้ปกครอง
รายการที่ไม่เรียงลำดับ 1, เด็ก 3
: ที่ n ของเด็ก และ : ที่ n ของประเภท คลาสหลอกหลอก CSS มีโพสต์ที่ยอดเยี่ยมเกี่ยวกับมัน หากคุณใช้ SASS Family.scss สามารถช่วยคุณสร้างความซับซ้อนได้ ชับเด็กองค์ประกอบ ified.คลาส Pseudo กับ Pseudo-Elements
หลอกองค์ประกอบ, เช่น ::ก่อน และ ::หลังจาก (ดูบทช่วยสอนนี้เกี่ยวกับวิธีการใช้งาน) ด้วย เพิ่มโดยตัวแทนผู้ใช้, และ สามารถกำหนดเป้าหมายและกำหนดสไตล์ด้วย CSS ได้ เช่นเดียวกับคลาสหลอก. ::ก่อน และ ::หลังจาก) หรือเป็นเพียงบางส่วนขององค์ประกอบที่มีอยู่ (เช่น ::จดหมายฉบับแรก หรือ :: ตัวยึด). ::, ในขณะที่ชั้นเรียนเทียมจะถูกระบุด้วยลำไส้ใหญ่เดียว :.1. สถานที่ของพวกเขาในลำดับ CSS Selector
ul>: last-child.red color: # B0171F;
ul> .red: ลูกคนสุดท้าย color: # B0171F;
.สีแดง) และอันที่สองเลือกเด็กคนสุดท้ายในองค์ประกอบที่มี .สีแดง ชั้นใน ul> .red :: after display: block; เนื้อหา: 'สีแดง'; สี: # B0171F;
รายการที่มีระดับ .สีแดง. ul> :: after.red display: block; เนื้อหา: 'สีแดง'; สี: # B0171F;
2. จำนวนการเกิดในลำดับตัวเลือก
: ครั้งแรกที่เด็ก และ :อ่านเท่านั้น ด้วยวิธีดังต่อไปนี้: : first-child: อ่านอย่างเดียว color: #EEEEEE;
jQuery Selector Extensions
: ไวยากรณ์ไม่ได้เป็น CSS pseudo-class ที่เหมาะสมเสมอไป หากคุณเคยใช้ jQuery มาก่อนคุณอาจใช้ตัวเลือกหลายตัว : ตัวอย่างเช่นไวยากรณ์ $ ( ': ช่องทำเครื่องหมาย'), $ ( ': การป้อนข้อมูล') และ $ ( ': เลือก'). / * เปลี่ยนแบบอักษรขององค์ประกอบ HTML ที่เกี่ยวข้องกับอินพุตเช่นปุ่มเลือกและอินพุต * / $ (": อินพุต") .css ("font-family", "courier new")
