ตัวอย่างด้านล่างจะไม่ทำงาน:

ย่อหน้าและในนั้น อ้วนองค์ประกอบ และนี่คือ โน้มเอียงองค์ประกอบ.

ที่นี่ อ้วนและ เน้นย้ำองค์ประกอบต่างๆ มากขึ้น โน้มเอียง.

ตัวอย่างจริงเพิ่มเติม

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

ขอแนะนำให้เพิ่มระยะขอบด้านบน (คุณสมบัติ Margin-top) การเยื้องขนาด 30px จะทำให้ข้อความสามารถอ่านได้ แต่ถ้าแท็ก

มาหลังจากนั้น

และนี่อาจเป็นจุดเริ่มต้นของบทความ เยื้องด้านบนเหนือแท็ก

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

นี่คือโค้ด html พร้อมตัวอย่างวิธีการทำงานของตัวเลือกองค์ประกอบที่อยู่ติดกัน

สวัสดี!

มุ่งหน้า h2

มุ่งหน้า h2

ข้อความในย่อหน้าเกี่ยวกับการผจญภัยอันเหลือเชื่อ

มุ่งหน้า h2

ข้อความในย่อหน้าเกี่ยวกับการผจญภัยอันเหลือเชื่อ

มุ่งหน้า h2

ข้อความในย่อหน้าเกี่ยวกับการผจญภัยอันเหลือเชื่อ

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

และ

นอกจากนี้ยังเป็นที่น่าสังเกตว่าเพื่อลดการเยื้องจะสะดวกในการใช้ค่าลบ

สวัสดี!

มุ่งหน้า h2

ข้อความในย่อหน้าเกี่ยวกับการผจญภัยอันเหลือเชื่อ

มุ่งหน้า h2

ข้อความในย่อหน้าเกี่ยวกับการผจญภัยอันเหลือเชื่อ

มุ่งหน้า h2

ข้อความในย่อหน้าเกี่ยวกับการผจญภัยอันเหลือเชื่อ

มุ่งหน้า h2

ข้อความในย่อหน้าเกี่ยวกับการผจญภัยอันเหลือเชื่อ

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

• รายการ #1.
• รายการ #2.
• รายการ #3.
• รายการ #4.

นี่คือสิ่งที่จะเกิดขึ้นจากตัวอย่างนี้:

รูปที่ 1 ตัวอย่างหมายเลข 5 ที่ทำงาน

วลาด เมอร์เซวิช

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

ลอเรม อิปซัม โดเลอร์นั่งได้เลย

ในตัวอย่างนี้แท็ก เป็นลูกของแท็ก

เพราะมันอยู่ในภาชนะนี้ ตามลำดับ

ทำหน้าที่เป็นผู้ปกครอง .

ลอเรม อิปซัม โดเลอร์ นั่งอาเมท

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

ไม่ส่งผลต่อทัศนคติของพวกเขาเลย

ลอเรม อิปซัมโดลอร์ซิตเอเมต, นักปรุงแต่งไขมัน ผู้ลากมากดี.

แท็กใกล้เคียงอยู่ที่นี่ และ และยัง และ - ในเวลาเดียวกัน และ องค์ประกอบที่อยู่ติดกันจะไม่ได้รับการปฏิบัติเนื่องจากมีคอนเทนเนอร์อยู่ระหว่างองค์ประกอบเหล่านั้น .

หากต้องการควบคุมรูปแบบขององค์ประกอบที่อยู่ติดกัน ให้ใช้เครื่องหมายบวก (+) ระหว่างตัวเลือกสองตัว ไวยากรณ์ทั่วไปต่อไป.

ตัวเลือก 1 + ตัวเลือก 2 (คำอธิบายกฎสไตล์)

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

ตัวอย่าง 11.1 แสดงโครงสร้างวิธีที่แท็กโต้ตอบกัน

ตัวอย่างที่ 11.1 การใช้ตัวเลือกที่อยู่ติดกัน

HTML5 CSS 2.1 IE Cr Op Sa Fx

ลอเรม อิปซัมโดลอร์ซิตเอเมต, นักปรุงแต่งชนชั้นสูงที่อ้วนท้วน

Lorem ipsum dolor นั่งอาเมต นักปรุงแต่งชนชั้นสูงที่อ้วนท้วน

ผลลัพธ์ของตัวอย่างจะแสดงในรูป 11.1.

ข้าว. 11.1. การไฮไลต์ข้อความด้วยสีโดยใช้ตัวเลือกที่อยู่ติดกัน

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

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

เรามาเรียกมันว่า sic แล้วนำไปใช้กับแท็กกันดีกว่า

- ย่อหน้าแรกหลังจากหัวข้อดังกล่าวจะถูกเน้นด้วยสีพื้นหลังและการเยื้อง (ตัวอย่าง 11.2)

HTML5 CSS 2.1 IE Cr Op Sa Fx

ตัวอย่างที่ 11.2 เปลี่ยนสไตล์ย่อหน้า

เปลี่ยนสไตล์ย่อหน้า

ให้สิงโตมีขนาดโดยรวม ยาว x กว้าง x สูง โดยที่ L คือความยาวของสิงโตตั้งแต่ปลายจมูกถึงปลายหาง W คือความกว้างของสิงโต และ H คือความสูงของสิงโต

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

หมายเหตุสำคัญ

เพื่อให้การคำนวณง่ายขึ้น สามารถละทิ้งส่วนท้ายได้และไม่ถือเป็นข้อผิดพลาดในการวัด

ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 11.2.

ข้าว. 11.2. การเปลี่ยนลักษณะที่ปรากฏของย่อหน้าโดยใช้ตัวเลือกที่อยู่ติดกัน

ในตัวอย่างนี้ ข้อความถูกจัดรูปแบบโดยใช้ย่อหน้า (tag

) แต่การเขียน H2.sic + P จะกำหนดสไตล์สำหรับย่อหน้าแรกที่อยู่ถัดจากแท็กเท่านั้น

ซึ่งมีคลาสชื่อ sic เพิ่มเข้ามา

และ

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

และ

จากนั้นจะสามารถปรับระยะห่างระหว่างทั้งสองได้อย่างง่ายดายโดยใช้ตัวเลือกที่อยู่ติดกัน

สถานการณ์จะคล้ายกันสำหรับแท็กที่ต่อเนื่องกัน

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

ตัวอย่างที่ 11.3 ช่องว่างระหว่างส่วนหัวและข้อความ

หัวเรื่อง 1

หัวเรื่อง 2

ย่อหน้า!

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

คำถามที่ต้องตรวจสอบ1. แท็กใดในโค้ดนี้ที่อยู่ติดกัน ₂สูตรกรดซัลฟูริก: ₄

1. ชม

2. และ
3. และ
4. _และ
5. และ

ดังนั้น:

และ

2. มีโค้ด HTML ต่อไปนี้ ^{ทฤษฎีบทสุดท้ายของแฟร์มาต์}เอ็กซ์ ^{ทฤษฎีบทสุดท้ายของแฟร์มาต์}
n ^{ทฤษฎีบทสุดท้ายของแฟร์มาต์}

+ ย

= Z

1. โดยที่ n คือจำนวนเต็ม > 2
2. ข้อความใดจะถูกเน้นด้วยสีแดงโดยใช้สไตล์ SUP + SUP ( color: red; )

ตัว "น" ตัวที่สอง

"n" ที่สองและสาม ตัวเลือก CSS ที่อยู่ติดกันตัวเลือก CSS ที่อยู่ใกล้เคียงหรือตัวเลือกพี่น้องตามที่ถูกเรียก ช่วยให้คุณสามารถใช้สไตล์กับองค์ประกอบในกรณีที่ปรากฏก่อน

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

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

ในตัวอย่างนี้ มีองค์ประกอบที่อยู่ติดกันเพียงสองคู่เท่านั้น<тег2>และ<тег3>และยัง<тег3>และ<тег5>, ทั้งหมด. นั่นก็คือ<тег2>และ<тег5>ไม่เป็นเพื่อนบ้านกันอีกต่อไป เนื่องจากมีระหว่างกัน<тег3> .

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

ตัวเลือก 1 + ตัวเลือก 2 ( คุณสมบัติ: มูลค่า; คุณสมบัติ: คุณค่า; -

จะเว้นวรรคทั้งสองด้านของเครื่องหมาย "+" หรือไม่ก็ได้ตามต้องการ

ตัวอย่างการใช้ตัวเลือกที่อยู่ติดกันใน CSS

หัวเรื่อง

ข้อความ. แข็งแกร่ง.ข้อความ. เอม.

ข้อความ. เอม.ข้อความ. แข็งแกร่ง.

ข้อความ. เอม.ข้อความ. แข็งแกร่ง.

ผลลัพธ์ในเบราว์เซอร์

หัวเรื่อง

ข้อความ. แข็งแกร่ง. ข้อความ. เอม.

ข้อความ. เอม.

ข้อความ. เอม.

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

สามารถรวมกันได้อย่างอิสระ เบราว์เซอร์อินเทอร์เน็ตเอ็กซ์พลอเรอร์

6.0 ไม่เข้าใจตัวเลือกที่อยู่ติดกัน (เช่นเดียวกับตัวเลือกลูก) จำสิ่งนี้ไว้

1. การบ้าน.
2. สร้างเค้าโครงสองคอลัมน์ปกติพร้อมเมนูบนเพจ ให้รายการเมนูมีเครื่องหมายรูปภาพ

ทำให้เป็นเช่นนั้นหากอยู่หลังแท็กชื่อ

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

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

ฉันเสนอให้แยกวิเคราะห์โครงสร้างนี้: ตามที่คุณอาจเดาได้จากบทเรียนที่แล้ว แท็ก 2, 3, 4, 5, 6 เป็นตัวเลือกบริบทสำหรับแท็ก1 - ในทางกลับกัน ตัวเลือกที่อยู่ใกล้เคียงจะเป็น: tag2 และ tag3, tag4 และ tag5 แต่ในขณะเดียวกันและ แท็ก2แท็ก4

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

Selector1 + selector2+ ...+selectorN ( property1: value; property2: value; ... propertyN: value)

หัวเรื่อง

ลองดูตัวอย่างนี้: แท็กเป็นตัวเลือกที่อยู่ติดกับแท็ก h1

ข้อความนี้ควรเป็นสีเขียว

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

- ทุกอย่างค่อนข้างชัดเจน และเราแค่ต้องดูทั้งหมดโดยใช้ตัวอย่างจริง

ข้อความในย่อหน้า

ข้อความในช่วง

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

เมื่อใช้สไตล์ เราจะเพิ่มผลลัพธ์เดียวกันให้กับแท็ก สาขาวิชา
>ช่วง(
}

ขนาดตัวอักษร: 200%; พี
+ช่วง(
}

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