ตัวเลือก CSS ลูกและบริบท คลาสหลอกขององค์ประกอบลูก วิธีเลือกองค์ประกอบลูกทั้งหมดใน css

ตัวเลือกลูกของ CSS คือตัวเลือกที่ใช้ในการนำสไตล์ไปใช้กับองค์ประกอบในประเภทเหล่านี้ หากเป็นลูกที่เกี่ยวข้องกับองค์ประกอบอื่นๆ (พาเรนต์) เช่นเดียวกับตัวเลือกไซต์ ตัวเลือกย่อยคือตัวเลือกคลังสินค้าและประกอบด้วยตัวเลือกแบบง่าย (คลาส ตัวระบุ ฯลฯ)

และฉันจะบอกคุณอีกครั้งเนื่องจากคุณลืมว่าองค์ประกอบของลูกสาวคืออะไรแล้วลองเดาดูสิเมื่อหยิบก้นขึ้นมาคุณก็รู้อยู่แล้ว

<тег1> <тег2>... <тег3><тег4>...

องค์ประกอบหนึ่งเรียกว่าลูกโดยสัมพันธ์กับองค์ประกอบอื่น เนื่องจากองค์ประกอบนั้นตั้งอยู่ตรงกลางขององค์ประกอบอื่นในระดับแรกของการสนับสนุน ก้นของเรา<тег2>і<тег3>є ทงคามิ<тег1>, ก<тег4>- เซดอนก้า<тег3> .

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

ตัวเลือก 1 > ตัวเลือก 2 (

สามารถวางช่องโล่งทั้งสองด้านของป้าย ">" หรือจะวางไว้หลังเส้นขอบก็ได้

ตัวอย่างการใช้ตัวเลือกลูก CSS

ผลลัพธ์ของเบราว์เซอร์

วรรค 1

ย่อหน้าที่ 2

ใบสมัครของใครต้องการให้คุณเพิ่มความเคารพสักสองนาที มีสามองค์ประกอบที่นี่ มีเพียงสององค์ประกอบเท่านั้นที่มีเฟรม อินพุต และฟิลด์ ทำไม

และอีกประเด็นหนึ่ง เฉพาะย่อหน้าแรกเท่านั้นที่มีข้อความเป็นสีน้ำเงินอินเทอร์เน็ตเอ็กซ์พลอเรอร์

6.0 ไม่เข้าใจตัวเลือกลูก ดังนั้นหากคุณสร้างไซต์โดยใช้เบราว์เซอร์เก่า โปรดจำไว้เสมอ

ตัวเลือกลูกในตาราง HTML

กลาง 2.2

และตอนนี้อาหาร คุณจะรู้ได้อย่างไรว่าเมื่อใดที่คุณต้องเปลี่ยนจากแท็กไปตรงกลางสำหรับตัวเลือกลูกเพิ่มเติม หากคุณต้องการเขียนแบบนี้ มันไม่ใช่แบบนี้: ตาราง > tr > td (

คุณเดาได้ไหมว่าทำไมมันถึงผิด? เลขที่? ทางด้านขวา คุณลืมองค์ประกอบหนึ่งไป - ซึ่งไม่ได้ระบุไว้อย่างชัดเจน แต่ยังคงมองไม่เห็นในทุกตาราง HTML เพียงแต่ว่าไม่มีแท็กบังคับที่เปิดและปิด ผู้คนจึงมักลืมเขาไป ก่อนจะพูดใช่ HTML-podruchnik เราไม่ได้ผ่านอะไรกับคุณมาก่อน ดังนั้นจึงเห็นได้อย่างชัดเจนว่าการเพิ่มเติมนั้นแทบไม่จำเป็นเลย ฉันคิดว่าคุณเดาได้แล้วว่าจะเป็นอย่างไรรายการที่ถูกต้อง

แต่ฉันจะยังคงแสดงให้คุณเห็น ตาราง > tr > td (

ตาราง > tbody > tr > td (

ก่อนที่จะพูด ไม่เพียงแต่ตารางเท่านั้นที่มีองค์ประกอบที่มีแท็กที่ไม่จำเป็นที่เปิดอยู่ แต่ยังมีองค์ประกอบอื่นๆ อีกด้วย ในทางปฏิบัติ “ปัญหาการหลงลืม” มักเกิดขึ้นจากโต๊ะเอง ดังนั้นฉันจึงขอให้คุณเคารพในสิ่งนั้น

1. การบ้าน.
2. ติดตั้งฟอนต์ Arial ขนาด 0.9em และพื้นหลังใดๆ บนเพจ
3. เขียนหัวเรื่องและย่อหน้าจำนวนหนึ่งบนหน้า เปลี่ยนขนาดและสีของข้อความหัวเรื่องตามความต้องการของคุณ
4. ตรวจสอบให้แน่ใจว่าโพสต์ที่อยู่ตรงกลางย่อหน้านั้นเป็นสีน้ำเงินโดยไม่มีการสนับสนุนใดๆ อย่างไรก็ตาม หากข้อความถูกใส่กรอบด้วยแท็กบางประเภท เช่น ตัวเอียง ก็จะถูกตำหนิว่าปรากฏบนเก้าอี้และเป็นสีแดง ฉันอยากจะชี้ให้เห็นอีกครั้งว่าคุณไม่จำเป็นต้องกำหนดรูปแบบของข้อความด้วยแท็กสกินที่จัดกรอบเฟรม สามารถทำได้ในระดับสากล จามรี? ลองคิดดูสิ

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

บทเรียนจะยากที่สุดสำหรับคุณ แต่อย่าบังคับตัวเองให้กระโดดเข้าสู่ตำแหน่งที่เชี่ยวชาญทันที แค่ทำการบ้านบ้าง ก่อนที่จะพูด รายการนี้ใช้ไม่ได้ใน Internet Explorer 6.0 เนื่องจากเด็กๆ ไม่เข้าใจตำแหน่งคงที่ ฉันคิดว่าหลายๆคนคงทราบเรื่องตัวเลือกบริบทใน CSS -.

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

และหน้าที่ของเราคือหารายได้ให้น้อยกว่าเชอร์โวนิม" อีกย่อหน้าหนึ่งมาเขียนสิ่งนี้ในวิกิตัวเลือกบริบท:

คอนเทนเนอร์พี (
สี:สีแดง;
}

จากนั้นเราจะรู้สึกขุ่นเคืองอย่างมากกับย่อหน้าที่เราไม่ต้องการเลย ปัญหานี้เกิดขึ้นแล้วเพื่อขอความช่วยเหลือ ตัวเลือกลูกใน CSS:

คอนเทนเนอร์ > พี (
สี:สีแดง;
}

เท่านี้เราก็ได้เหรียญแดงของเราหายแล้ว” อีกย่อหน้าหนึ่งบางส่วนของย่อหน้านี้เป็นส่วนย่อยโดยตรงของ .คอนเทนเนอร์- ย่อหน้าแรกเอ " єลูกสำหรับภายในกอง

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

ประเภทเดนมาร์ก ตัวเลือกและสิ่งที่ต้องทำสวัสดีผู้อ่านที่รัก! เพื่อสานต่อธีมของตัวเลือก CSS ฉันต้องการรับทราบความเคารพของคุณ คำอธิบายของตัวเลือกย่อยและบริบทและก็ х ด้วย

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

Google Chrome -วิธีการแก้ไขดังกล่าวสามารถพบได้ในการปรับเปลี่ยนใหม่ของเบราว์เซอร์ยอดนิยมทั้งหมด รวมถึง Firebug สำหรับ Firefox () คุณสามารถดูเนื้อหาทางทฤษฎีของโพสต์นี้ได้โดยแก้ไขหน้าใดก็ได้ในเว็บไซต์ใดก็ได้! ในการดำเนินการนี้ เพียงกด F12 หากคุณใช้ Google Chrome หรือ มอซซิลา ไฟร์ฟอกซ์ :

- และตอนนี้ ผมจะแนะนำการแทนที่แท็ก p ตามตัวอย่างนี้เด็กและบริบท ตัวเลือก CSSі ย่อหน้านี้รวมถึง.

แท็กจัดรูปแบบ em และแข็งแกร่ง

, วิธีดูข้อความ

อ้วน-

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

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

ตัวเลือก CSS ลูก

ตัวเลือกลูกในแผนผังองค์ประกอบจะอยู่ที่ตรงกลางขององค์ประกอบหลัก ซึ่งในกรณีนี้ไวยากรณ์สำหรับการเขียนตัวเลือก CSS จะเป็นดังนี้:

สไตล์จะขึ้นอยู่กับตัวเลือก 2 แต่เฉพาะในกรณีนั้น เนื่องจากเป็นลูกของตัวเลือก 1 มาดูรายงาน vikorista และภาพหน้าจอโฮเวอร์จากแผนผังองค์ประกอบ ตัวอย่างเช่น คุณสามารถสร้างกฎดังนี้:

เอ็ม (สี: เขียว;)

กฎนี้ใช้กับคำที่เหลือในย่อหน้าในรูปแบบ "ตัวเอียง" เนื่องจากคำนั้นอยู่ระหว่างแท็กเปิดและปิด em แท็ก em เป็นแท็กลูกของ p เนื่องจากมันตั้งอยู่ตรงกลาง และแทนที่จะเป็นข้อความ คำนั้นจะเป็น "ตัวเอียง" เป็นสีเขียว

อย่างไรก็ตาม แท็ก em ไม่ใช่ชุดย่อยโดยตรงของแท็ก p เนื่องจากถูกรวมไว้หน้าแท็กที่รัดกุม ส่งผลให้ส่วนใดของย่อหน้า “em และแท็กการจัดรูปแบบที่รัดกุม” จะไม่ถูกระงับ

ตัวเลือกบริบท CSS ถึงเวลาแต่งงานแล้วตัวเลือกบริบท CSS คืออะไร?

-

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

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

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

ลองดูอีกตัวอย่างหนึ่งของการโต้ตอบของผู้เลือกตามบริบทและลูกกับย่อหน้าของเรา มาเขียนกฎ CSS ต่อไปนี้สำหรับลูกและตัวเลือกบริบท:

Div em (สี: แดง;) em (สี: เขียว;)

หลังจากนี้ ย่อหน้าของเราจะมีการออกแบบดังต่อไปนี้:

ดังที่คุณทราบ มีข้อความจำนวนมาก ตำแหน่งในแท็ก em และ strong การเลือกสีแดง ดังนั้นกฎของตัวเลือกบริบทจึงถูกต้อง จากนั้นแท็ก em จะถูกวางไว้ในคอนเทนเนอร์ strong และ div และ ระดับของการแทรกตามที่ได้รับมอบหมายไม่มีนัยสำคัญ

อาหารที่ต้องตำหนิ: เหตุใดคำว่า "ตัวเอียง" ซึ่งใช้แทน em จึงเป็นสีเขียว และสำหรับทุกคน กฎตัวเลือกบริบทก็มีความเกี่ยวข้อง แต่สำหรับข้อความส่วนนี้ในย่อหน้า กฎของตัวเลือกย่อยก็เป็นจริงเช่นกัน ดังนั้นจึงไม่ชัดเจนว่าสำหรับตัวเลือกย่อยนั้น องค์ประกอบจะต้องเข้าสู่คลังของแท็ก p ทันที

ทางด้านขวาคือใน CSS มีกฎหมายที่มีความสำคัญกว่า หน่วยงาน CSSซึ่งเป็นที่รู้จักกันต่ำกว่า โทโทอิน ถึงผู้ชายคนนี้กฎตัวเลือกลูกอยู่ในเอกสารด้านล่าง สไตล์ CSS ด้านล่างเขียนไว้สำหรับตัวเลือกบริบทของคอนเทนเนอร์ div นั่นเป็นเหตุผลว่าทำไมคำว่า "ตัวเอียง" จึงเปลี่ยนเป็นสีเขียว หากกลับกัน กฎ “em> (สี: สีเขียว;)” จะหยุดใช้ และข้อความที่เป็น “ตัวเอียง” จะเป็นสีแดง

วัตถุประสงค์หลักของตัวเลือกนี้มาจากชื่อและอยู่ในองค์ประกอบหลัก แสดงหลังจากเพิ่มเครื่องหมายพื้นฐาน ">" ซึ่งเชื่อมโยงองค์ประกอบลูกกับองค์ประกอบพ่อ โปรดทราบว่า vikoristan มีตัวเลือกแบบง่าย ลองมาดูโค้ดดังนี้:

องค์ประกอบ > ul ( padding-top: 20px; )

การเข้ารหัสนี้หมายความว่ารายการที่อยู่ในองค์ประกอบจะมีระยะขอบด้านใน 20 พิกเซลจากขอบด้านบน การปรากฏของไอคอน ">" แสดงว่ากฎนั้นจำกัดอยู่เพียงรายการการสนับสนุนระดับแรก

รายงานการวิเคราะห์ตัวเลือกองค์ประกอบลูก

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

ก่อนอื่นให้เราประเมินการทำงานของตัวดำเนินการเลือกลูกโดยใช้ก้นไปข้างหน้า:

div > р (สี: #ff0000; /* สีแดง */ )

< div>แถวนี้จะเป็นแม่ของข้อความสีดำ< span>แถวนี้จะถูกแปลงเป็นสีแดงผ่านแถวที่เป็นแท็กย่อยสำหรับนักร้อง < p>ฉันกลับมาที่วรรณกรรมสีดำ< span>นอกจากนี้ยังมีสัญลักษณ์สีดำอยู่ด้วย เพราะในช่วงนี้พ่อจะมีแท็ก r

แอปพลิเคชั่นนี้ยืนยันการทำงานของผู้ปฏิบัติงานของผู้เลือกลูกจนถึงระดับการลงทุน

การแลกเปลี่ยนสำหรับผู้ดำเนินการ vikoristan ของผู้เลือกลูก

คุณต้องเคารพสิ่งนั้น การดำเนินการที่ได้รับรองรับเบราว์เซอร์ทั้งหมดนอกเหนือจาก Internet Explorer 6 ในตำนาน ฉันคิดว่ามีเพียงไม่กี่คนที่ใช้เบราว์เซอร์นี้เนื่องจากมีเบราว์เซอร์ที่ไม่เหมือนใครดังนั้นสำหรับพวกเขาจึงมีทางออกจากสถานการณ์ซึ่งจะอธิบายนอกเหนือจาก สถิติ.

สิ่งต่างๆกำลังจะหยุดนิ่ง

โปรแกรมเมอร์หันไปใช้ตัวเลือกองค์ประกอบย่อยประเภทเหล่านี้เมื่อพวกเขาต้องการเพิ่มสไตล์ที่เป็นเอกลักษณ์ของตนเองให้กับองค์ประกอบที่ซ้อนกัน ตัวเลือกที่คล้ายกันสามารถใช้เพื่อย่อฟังก์ชัน CSS เพื่อปรับปรุงความสามารถในการอ่านเอกสาร ตามที่แสดงให้เห็นในทางปฏิบัติ การดำเนินการเหล่านี้จะดำเนินการบ่อยที่สุดเมื่อเปิดเมนูและหลุดออกไป

นอกจากนี้ ตัวเลือกองค์ประกอบลูกยังใช้เพื่อกำหนดสไตล์เฉพาะให้กับองค์ประกอบที่รู้จักมาก่อน กล่าวอีกนัยหนึ่ง:

หลัก > ส่วนหัว ( /* ออกแบบไปจนถึงส่วนหัวหลัก */ }

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

กระเป๋าเบาะ

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

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

ตัวเลือกลูก CSS

ในบทความก่อนหน้านี้ เราได้เรียนรู้เกี่ยวกับการเชื่อมต่อดั้งเดิมระหว่างองค์ประกอบของเอกสาร HTML รวมถึงองค์ประกอบลูกด้วย มาดูกันว่าการเชื่อมต่อเหล่านี้สามารถแก้ไขได้จาก CSS อย่างไร

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

ซึ่งเป็นบริษัทย่อยที่เกี่ยวข้องกัน ,ไม่ยึดติดกับคนอื่น

(ตัวอย่างเช่น,

ลูกสาวร้อย