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

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

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

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

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

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

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

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

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

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

สวัสดี!

มุ่งหน้า h2

มุ่งหน้า h2

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

มุ่งหน้า h2

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

มุ่งหน้า h2

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

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

และ

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

สวัสดี!

มุ่งหน้า h2

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

มุ่งหน้า h2

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

มุ่งหน้า h2

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

มุ่งหน้า h2

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

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

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

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

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

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

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

ตัวเลือกสากล

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

ในที่นี้ตัวดำเนินการ “*” หมายความว่าเรามีตัวเลือกสากล ใช้เมื่อจำเป็นต้องตั้งค่าสไตล์เดียวสำหรับองค์ประกอบทั้งหมดบนหน้าเว็บ บางครั้งตัวเลือกสากลก็ไม่จำเป็น ตัวอย่างเช่น รายการ .*class และ .class จะเหมือนกันโดยสิ้นเชิงในกรณีเหล่านี้ ตอนนี้ตัวอย่างที่แน่นอน โดยทั่วไป สิ่งที่พบได้บ่อยที่สุดคือการกำหนดแบบอักษร ขนาดและสีที่สอดคล้องกัน และการจัดวางข้อความปกติบนบล็อกหรือหน้าเว็บไซต์

* ( ตระกูลฟอนต์: Tahoma, Arial, Helvetica, sans-serif; /* แบบอักษรข้อความ */ สี: #646464; /* สีข้อความ */ ขนาดแบบอักษร: 75%; /* ขนาดข้อความ */ text-align : ซ้าย; /* ตำแหน่งข้อความ */ )

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

ตัวเลือก CSS ที่อยู่ติดกัน

ตอนนี้เรามาดูตัวเลือกใกล้เคียงกันอีกสักหน่อย องค์ประกอบบนหน้าเว็บถูกกำหนดให้อยู่ติดกันเมื่อปรากฏติดกันโดยตรงในรหัสเอกสาร ในกรณีนี้ ไวยากรณ์ของสไตล์ CSS มีลักษณะดังนี้:

ตอนนี้ใช้ย่อหน้าของข้อความที่กำหนดโดยแท็ก p ซึ่งจะรวมแท็ก b, i และแท็กขนาดใหญ่เป็นองค์ประกอบย่อย ซึ่งกำหนดการจัดรูปแบบของข้อความตามลำดับ ตัวอักษรตัวหนา ตัวเอียง และแบบอักษรที่ขยาย:

ย่อหน้านี้ใช้ แท็กข, แท็กฉัน, แท็กใหญ่.

และใช้เครื่องมือแก้ไข CSS และ HTML ซึ่งสร้างไว้ในเบราว์เซอร์ยอดนิยมเวอร์ชันล่าสุด (,) และซึ่งเป็นอะนาล็อกของปลั๊กอินเบราว์เซอร์ Firefox ที่มีชื่อเสียง () เราจะแทรกย่อหน้านี้ไว้ที่ใดก็ได้บนหน้าเว็บใด ๆ (I ทำถูกต้องแล้วในหน้าบทความที่แล้ว ย่อหน้าแรก) ตัวอย่างเช่น เครื่องมือนี้ใน Chrome เรียกใช้โดยเพียงแค่กดปุ่ม F12 สามารถใช้สำหรับการเสริมเนื้อหาในทางปฏิบัติในส่วน "พื้นฐาน HTML" และ "การสอน CSS" ดังนั้นฉันจึงแทรกข้อความเป็นย่อหน้าแรก:

ย่อหน้านี้จะเป็นการทดลองและเราจะพิจารณาแอปพลิเคชันโดยใช้ตัวอย่าง ตัวเลือกที่อยู่ติดกัน- อย่างที่ฉันบอกไปแล้ว แท็ก b, i และ big นั้นเป็นแท็กย่อยของแท็กย่อหน้า p เนื่องจากแท็กทั้งหมดอยู่ภายใน p คอนเทนเนอร์โดยตรง แท็กที่อยู่ติดกันคือ b และ i รวมถึง i และ big ตอนนี้ลองใช้กฎ CSS สำหรับตัวเลือกที่อยู่ติดกัน:

B+i (สี: แดง;) i+big (สี: เขียว;)

หลังจากใช้สไตล์เหล่านี้แล้ว ย่อหน้าจะมีลักษณะดังนี้:

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

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

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

H3 ( ขนาดตัวอักษร: 1.7em; /* ขนาดตัวอักษร */ การจัดวางข้อความ: กึ่งกลาง; /* การจัดวางข้อความ */ น้ำหนักแบบอักษร: ปกติ; /* น้ำหนักข้อความปกติ */ ตระกูลแบบอักษร: Tahoma, Arial, Helvetica, sans-serif; /* รูปแบบตัวอักษร */ สี: #646464; /* สีข้อความ */ )

หากต้องการเน้นชื่อเรื่องของบันทึกย่อหรือเชิงอรรถ ให้กำหนดคลาสพิเศษ เช่น:

H3.put ( color: red; /* สีข้อความ */ margin-left: 5px; /* padding ด้านซ้าย */ margin-top: 0.5em; /* padding ด้านบน */ padding: 10px; /* ระยะขอบรอบข้อความ */ การจัดตำแหน่งข้อความ: ซ้าย; /* ตำแหน่งข้อความ */ )

ตอนนี้ ลองใช้ตัวเลือกที่อยู่ติดกันเพื่อสร้างลักษณะย่อหน้าเชิงอรรถพิเศษ ย่อหน้านี้จะถูกวางไว้ใต้ส่วนหัวโดยตรงด้วยสไตล์ "h3.put":

H3.put+p ( พื้นหลัง: #ffefd5; /* สีพื้นหลัง */ Margin-left: 15px; /* Padding ด้านซ้าย */ Margin-right: 120px; /* Padding ด้านขวา */ Margin-top: 0.5em; /* ช่องว่างด้านบน */ ช่องว่างภายใน: 5px; /* ระยะขอบรอบข้อความ */ )

อีกครั้งโดยใช้เครื่องมือแก้ไขของ Google Chrome ซึ่งฉันได้แจ้งให้คุณทราบ (แต่ก็คุ้มค่า) เราจะป้อนชื่อเรื่องสำหรับเชิงอรรถ โดยไม่ลืมใส่คลาสที่วางไว้:

ความสนใจ!

จากนั้นเราก็เขียนข้อความเชิงอรรถ:

เนื้อหาที่นำเสนอในเอกสารนี้มีความสำคัญมากในแง่ของการเรียนรู้พื้นฐานของ CSS (Cascading Style Sheets)

.

หลังจากการเคลื่อนไหวทั้งหมดนี้ เราจะได้รับย่อหน้าเชิงอรรถต่อไปนี้บนหน้าเว็บ (ฉันขอเตือนคุณว่าฉันได้แทรกย่อหน้านี้ไว้ที่ส่วนท้ายของบทความก่อนหน้าของฉันเกี่ยวกับตัวเลือกย่อยและบริบท):

ในบล็อกหรือเว็บไซต์ เมื่อคุณผูกคลาส "put" เข้ากับแท็ก h3 เชิงอรรถดังกล่าวจะปรากฏบนหน้าเว็บ ยิ่งไปกว่านั้น เฉพาะย่อหน้าแรกหลังแท็ก h3 ที่มี “class=“put”” เท่านั้นที่จะถูกจัดรูปแบบในลักษณะพิเศษ แต่นั่นคือสิ่งที่เราต้องการจริงๆ ใช่ไหม?

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

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

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

ตัวผสมใน CSS (ตัวเลือกที่อยู่ติดกัน ลูก และบริบท)

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

สัญลักษณ์ตัวรวมตัวแรก บวก(+) หรือ ตัวเลือกที่อยู่ติดกัน- Plus ถูกตั้งค่าระหว่างตัวเลือกสองตัว:

<селектор 1> + <селектор 2> { <стиль> }

ในกรณีนี้จะใช้สไตล์กับ ตัวเลือก 2แต่หากอยู่ติดกันเท่านั้น ตัวเลือก 1และมาหลังจากนั้น ลองดูตัวอย่าง:

แข็งแกร่ง + ฉัน (

}
...

นี่เป็นข้อความปกติ นี่เป็นข้อความตัวหนา, ข้อความธรรมดา, ข้อความสีแดง

นี่เป็นข้อความปกติ นี่เป็นข้อความตัวหนา, ข้อความธรรมดา, และนี่คือข้อความปกติ.

ผลลัพธ์:

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

เครื่องผสมผสาน ตัวหนอน(~) ใช้กับตัวเลือกที่อยู่ติดกันด้วย แต่คราวนี้อาจมีองค์ประกอบอื่นอยู่ระหว่างตัวเลือกเหล่านั้น ในกรณีนี้ ตัวเลือกทั้งสองจะต้องซ้อนอยู่ในแท็กพาเรนต์เดียวกัน:

<селектор 1> ~ <селектор 2> { <стиль> }

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

แข็งแกร่ง~ฉัน(
สี:สีแดง; /* สีตัวอักษรสีแดง */
}
...

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

นี่เป็นข้อความปกติ นี่เป็นข้อความตัวหนา, ข้อความธรรมดา, และนี่คือข้อความสีแดง.

ผลลัพธ์:

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

เครื่องผสมผสาน > หมายถึง ตัวเลือกลูก- ช่วยให้คุณสามารถผูกสไตล์ CSS กับองค์ประกอบของหน้าเว็บที่ซ้อนกันโดยตรงภายในองค์ประกอบอื่น:

<селектор 1> > <селектор 2> { <стиль> }

สไตล์จะถูกผูกไว้กับ ตัวเลือก 2ซึ่งซ้อนกันอยู่โดยตรง ตัวเลือก 1.

div > แข็งแกร่ง (

}
...

นี่เป็นข้อความปกติ นี่คือข้อความตัวหนาตัวเอียง.

นี่เป็นข้อความปกติ และนี่คือข้อความตัวหนาปกติ.

และผลลัพธ์:

ดังที่คุณเห็นในภาพ กฎสไตล์มีผลกับแท็กแรกเท่านั้น ซึ่งซ้อนอยู่ภายในแท็กโดยตรง

- และพาเรนต์ที่อยู่ติดกันของแท็กที่สอง คือแท็ก

กฎเกณฑ์นี้จึงใช้ไม่ได้กับเขา

ต่อไปเราจะมาดูกัน ตัวเลือกบริบท<пробел> - ช่วยให้คุณสามารถผูกสไตล์ CSS กับองค์ประกอบที่ซ้อนกันภายในองค์ประกอบอื่น และสามารถมีการซ้อนระดับใดก็ได้:

<селектор 1> <селектор 2> { <стиль> }

สไตล์จะถูกนำไปใช้กับ ตัวเลือก 2ถ้ามันซ้อนกันอยู่ ตัวเลือก 1.

ลองดูตัวอย่างก่อนหน้านี้ เฉพาะเมื่ออธิบายกฎ CSS ที่เราใช้ตัวเลือกบริบท:

div แข็งแกร่ง(
รูปแบบตัวอักษร: ตัวเอียง /* ตัวเอียง */
}
...

นี่เป็นข้อความปกติ นี่คือข้อความตัวหนาตัวเอียง.

นี่เป็นข้อความปกติ และนี่คือข้อความตัวหนาตัวเอียงด้วย.

ข้อความธรรมดาและ แค่ข้อความตัวหนา

ผลลัพธ์:

อย่างที่คุณเห็น คราวนี้กฎส่งผลกระทบต่อทั้งสองแท็ก แม้กระทั่งอันที่ซ้อนอยู่ในคอนเทนเนอร์ก็ตาม

และลงในย่อหน้า

- เพื่อแท็ก ซึ่งซ้อนอยู่ภายในย่อหน้า

กฎ CSS ไม่ทำงานเลย

ตัวเลือกตามแอตทริบิวต์แท็ก

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

1. ตัวเลือกแอตทริบิวต์อย่างง่าย

ดูเหมือนว่า:

<селектор>[<имя атрибута тега>] { <стиль> }

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

แข็งแกร่ง(
สี:สีแดง;
}
...

รถยนต์นี่คือมอเตอร์กลแบบไร้ร่องรอย ยานพาหนะบนท้องถนนมีล้ออย่างน้อย 4 ล้อ

ผลลัพธ์:

ในภาพคุณจะเห็นว่ามีการใช้กฎ CSS (สีข้อความสีแดง) กับองค์ประกอบ แข็งแกร่งซึ่งมีการเพิ่มแอตทริบิวต์เข้าไป ชื่อ.

2. ตัวเลือกแอตทริบิวต์พร้อมค่า

ไวยากรณ์สำหรับตัวเลือกนี้เป็นดังนี้:

<селектор>[<имя атрибута тега>=<значение>] { <стиль> }

ผูก สไตล์ไปยังองค์ประกอบที่แท็กมีแอตทริบิวต์ตามที่ระบุ ชื่อและ ความหมาย- ตัวอย่าง:

ก(
สี:สีแดง;
ขนาดตัวอักษร:150%;
}
...
.ru" target="_blank">ลิงก์ในหน้าต่างใหม่

ผลลัพธ์:

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

3. หนึ่งในค่าแอตทริบิวต์หลายค่า

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

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

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

{
สี:สีแดง;
ขนาดตัวอักษร:150%;
}
...

โทรศัพท์ของเรา: 777-77-77

ที่อยู่ของเรา: มอสโกเซนต์ โซเวตสกายา 5

คุณจะได้รับผลลัพธ์ดังต่อไปนี้:

กฎนี้ใช้กับองค์ประกอบที่มีค่าแอตทริบิวต์ดังนี้: ระดับมีความหมาย โทร.

4. ยัติภังค์ในค่าแอตทริบิวต์

อนุญาตให้ใช้ยัติภังค์ในตัวระบุและค่าคลาส หากต้องการผูกสไตล์กับองค์ประกอบที่มีค่าแอตทริบิวต์อาจมียัติภังค์คุณสามารถใช้โครงสร้างต่อไปนี้:

[แอตทริบิวต์|="ค่า"] ( สไตล์ )
ตัวเลือก[attribute|="value"] ( สไตล์ )

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

{
สี:สีแดง;
ขนาดตัวอักษร:150%;
}
...

• จุดที่ 1


• จุดที่ 2


• จุดที่ 3


• จุดที่ 4

ผลลัพธ์:

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

5. ค่าแอตทริบิวต์เริ่มต้นด้วยข้อความเฉพาะ

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

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

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

ก(
สี:สีเขียว;
แบบอักษรน้ำหนัก: ตัวหนา;
}
...

ผลลัพธ์:

ตัวอย่างนี้แสดงวิธีแสดงลิงก์ภายนอกและลิงก์ภายในที่แตกต่างกัน ลิงก์ภายนอกจะขึ้นต้นด้วยสตริง "http://" เสมอ ดังนั้นในตัวเลือก เราระบุว่าสไตล์จะถูกนำไปใช้กับลิงก์ที่มีแอตทริบิวต์เท่านั้น hrefเริ่มต้นด้วยความหมาย http://.

6. ค่าแอตทริบิวต์ลงท้ายด้วยข้อความบางอย่าง

ผูกสไตล์กับองค์ประกอบที่มีค่าแอตทริบิวต์ลงท้ายด้วยข้อความที่ระบุ มีไวยากรณ์ดังต่อไปนี้:

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

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

ไอเอ็มจี (
เส้นขอบ: สีแดงทึบ 5px;
}
...

ภาพ GIF

รูปแบบรูปภาพ png

ผลลัพธ์:

ในตัวอย่างนี้ รูปภาพทั้งหมดที่มีนามสกุล gif จะแสดงโดยมีขอบสีแดงหนา 5 พิกเซล

7. ค่าแอตทริบิวต์ประกอบด้วยสตริงที่ระบุ

ตัวเลือกนี้จะผูกสไตล์กับแท็กที่มีค่าแอตทริบิวต์ที่มีข้อความเฉพาะ ไวยากรณ์:

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

สไตล์ผูกมัดกับธาตุที่มี คุณลักษณะโดยมีชื่อที่ระบุและค่าประกอบด้วยชื่อที่ระบุ สตริงย่อย- ตัวอย่างเช่น:

ไอเอ็มจี (
เส้นขอบ: สีแดงทึบ 5px;
}
...

รูปภาพจากโฟลเดอร์แกลเลอรี

รูปภาพจากโฟลเดอร์อื่น

ผลลัพธ์:

ในตัวอย่าง สไตล์นี้ใช้กับรูปภาพที่โหลดจากโฟลเดอร์ "แกลเลอรี่".

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

ตัวเลือก[attribute1="value1"][attribute2="value2"] ( สไตล์ )

นอกจากนี้ ฉันขอเตือนคุณเกี่ยวกับตัวเลือก CSS พิเศษ:

• ใช้สัญลักษณ์ “+” และ “~” เกิดขึ้น
• สัญลักษณ์ ">" จะผูกสไตล์ CSS เข้ากับ บริษัท ย่อยแท็ก;
• เครื่องหมาย<пробел>สร้างตัวเลือกบริบท

ในบทความต่อๆ ไป เราจะดู pseudo-element และ pseudo-classes ซึ่งมีเครื่องมือการจัดการสไตล์ที่ทรงพลัง

แค่นี้ก่อน เจอกันใหม่