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

โครงร่างโค้ด CSS มีลักษณะดังนี้:

ตัวเลือก (คุณสมบัติ CSS: ค่า; คุณสมบัติ CSS: ค่า; ... เป็นต้น)

ในตัวเลือกสากล เครื่องหมายดอกจัน * ทำหน้าที่เป็นตัวเลือก:

* (คุณสมบัติ CSS: ค่า; คุณสมบัติ CSS: ค่า; ... เป็นต้น)

ตัวเลือกสากลมีผลกับแท็กทั้งหมดของเอกสาร HTML พร้อมกัน

ตัวอย่างเช่น คุณสามารถลบช่องว่างภายในและช่องว่างภายในทั้งหมดออกจากแท็กทั้งหมดในเอกสาร HTML:

* (ระยะขอบ: 0; การเติม: 0;)

สมมติว่าเรามีเอกสาร HTML ที่มีรหัสต่อไปนี้:

เสือดาวหิมะ

ด้วยวิธีต่อไปนี้

ลองใช้ตัวเลือกสากลเพื่อทำให้สีฟอนต์ของแท็กทั้งหมดเป็นสีเขียว เขียว ชื่อฟอนต์ arial สไตล์ฟอนต์เฉียง

เสือดาวหิมะ

เสือดาวหิมะ (irbis, ak เสือดาว) เป็นสัตว์เลี้ยงลูกด้วยนมแมวขนาดใหญ่ที่กินสัตว์เป็นอาหาร มันอาศัยอยู่ในเทือกเขาของอัฟกานิสถาน พม่า ภูฏาน อินเดีย คาซัคสถาน คีร์กีซสถาน จีน มองโกเลีย เนปาล ปากีสถาน รัสเซีย ทาจิกิสถาน และอุซเบกิสถาน irbis มีความโดดเด่นด้วยลำตัวที่บางยาวและยืดหยุ่นได้ขาค่อนข้างสั้นหัวเล็กและหางยาวมาก ความยาวของเสือดาวหิมะที่มีหางคือ 200-230 ซม. น้ำหนักสูงสุด 55 กก. ขนสีอ่อน เทาควัน มีจุดดำรูปวงแหวนหรือทึบ

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

หน้าในเบราว์เซอร์จะมีลักษณะดังนี้

คุณยังสามารถทดลองกับช่องว่างภายใน ทำให้เป็น 0 ก่อน จากนั้นจึงเพิ่ม 15px แล้วเพิ่มลงในโค้ด CSS

• งานที่กำลังดำเนินการคือการเลือกรายการทั้งหมด โดยทั่วไปแล้วทุกคน
• การกำหนด - สัญลักษณ์ดอกจัน - *.
• ตัวอย่างการใช้งาน:

รีเซ็ตการเยื้องสำหรับองค์ประกอบทั้งหมดโดยค่าเริ่มต้น

เรียนรู้เพิ่มเติมเกี่ยวกับตัวเลือกสากล

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

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

ตัวอย่าง:

* .error (color: red;) .error (color: red;) / * กฎทั้งสองนี้เทียบเท่ากัน ตัวเลือกสากลถูกข้ามในกรณีที่สอง * /

พื้นที่สมัคร

ที่จริงแล้วสะดวกที่สุดในการใช้ตัวเลือกสากลดังในตัวอย่างแรกเพื่อรีเซ็ตค่าเริ่มต้นของสไตล์ที่ขึ้นอยู่กับเบราว์เซอร์ (โดยเฉพาะการเยื้อง)

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

คุณและฉันมาที่หัวข้อถัดไปได้อย่างราบรื่น ด้วยตัวเลือกสากลดูเหมือนว่าจะแยกออก ได้เวลาไปต่อแล้ว. สถานีต่อไป - .

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

มีเจ็ดประเภท - แท็ก, คลาส, Id, สากล, คุณลักษณะเช่นเดียวกับคลาสหลอกและองค์ประกอบหลอก มากเกินไปหน่อยไหม ไม่มีอะไรหรอก เราจะค่อยๆ วิเคราะห์พวกมันทั้งหมด และด้วยเหตุนี้ โดยใช้ตัวอย่างที่มีรายละเอียด

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

แท็ก CSS และตัวเลือกคลาส

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

ตัวอย่างนี้จะใช้สีแดงสำหรับสีแบบอักษรและสีเทาสำหรับการเติมพื้นหลังสำหรับแท็ก P ของย่อหน้าทั้งหมด กฎ CSS ใดๆ สามารถมีตัวเลือกได้หลายตัวพร้อมกัน ในกรณีนี้จะต้องอ่านอย่างไร? ตลอดเวลา จากขวาไปซ้าย, เช่น. เริ่มต้นที่ใกล้กับวงเล็บปีกกาเปิดมากที่สุด

ในตัวอย่างข้างต้น บรรทัดแรกจะแสดงตัวเลือกแท็ก (องค์ประกอบ) ที่บอกให้สีแบบอักษรเป็นสีแดงสำหรับ Divs ทั้งหมด

เนื้อหาของคอนเทนเนอร์ปกติ Div

ในบรรทัดที่สอง เราจะเห็นตัวอย่างของตัวเลือกที่ซับซ้อน ซึ่งเรามีองค์ประกอบใหม่เช่น คลาส (คลาส)... มีการกำหนดไว้ในคุณภาพ สำหรับค่าของคลาส เราสามารถใช้ชื่อใดก็ได้โดยใช้สัญลักษณ์ ,,, [_], [-]

แต่นอกจากคลาสแล้ว Id ยังใช้ในภาษามาร์กอัปของรูปแบบอีกด้วย ความแตกต่างระหว่างคลาสและ ID คืออะไร? ค่าของหลังต้องไม่ซ้ำกันตั้งแต่ รหัสเป็นตัวระบุที่ไม่ซ้ำกันสำหรับแท็ก Html และชื่อ (ค่า) สามารถใช้ได้เพียงครั้งเดียวในโค้ด

และค่าของคลาสก็ไม่ซ้ำกันและสามารถใช้ได้กับองค์ประกอบจำนวนเท่าใดก็ได้ในโค้ด เหล่านั้น. แท็กที่แตกต่างกัน (Div, P, H1 เป็นต้น) สามารถมีค่าเดียวกันสำหรับแอตทริบิวต์ class:

มันถูกใช้ในตัวเลือก CSS อย่างไร? ปรากฎว่าสะกดชื่อ ประข้างหน้า.

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

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

ย่อหน้าพร้อมข้อความ

ย่อหน้าพร้อมข้อความ

เหล่านั้น. ตอนนี้เรามีคลาส XYZ และกฎที่เขียนไว้:

Xyz (สี: ฟ้า)

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

มาดูตัวอย่างการใช้แท็กและตัวเลือกคลาสใน CSS กันอีกครั้ง ลองนึกภาพว่าเรามีกฎของสไตล์ดังต่อไปนี้:

Div (สี: สีแดง) div.a123 (สี: สีเขียว) .xyz (สี: สีน้ำเงิน)

และลองจินตนาการว่าในโค้ด Html เรามีองค์ประกอบดังต่อไปนี้:

ตามกฎที่กำหนดไว้สำหรับตัวเลือกที่ระบุ เนื้อหาขององค์ประกอบที่กำหนดของรหัส Html ควรมีลักษณะดังนี้:

ตอนนี้เรามาดูกันว่าทำไมเบราว์เซอร์จึงตีความสไตล์ขององค์ประกอบเหล่านี้ของโค้ด Html สำหรับ Div คอนเทนเนอร์แรก ซึ่งไม่มีการเขียนคลาส กฎ CSS ที่ใช้ได้กับคอนเทนเนอร์ทั้งหมดจะใช้: div (สี: สีแดง) ดังนั้นเนื้อหาจะเป็นสีแดง สิ่งที่ต้องแสดง.

ในแท็กของ Div ที่สอง เราได้ลงทะเบียนคลาส "a123" แล้ว ในกรณีนี้ กฎ CSS ที่สอดคล้องกับ "div.a123" จะถูกนำมาใช้ (เพราะเราเพิ่งมีแท็ก Div ที่มีแอตทริบิวต์ class = "a123" เขียนอยู่) ดังนั้นเนื้อหาของภาชนะที่สองจะเป็นสีเขียว

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

เราจะพูดถึงรายละเอียดนี้ในภายหลัง แต่สำหรับตอนนี้ ฉันจะบอกว่าลำดับความสำคัญของ "div.a123" (สำหรับ Div ที่สองในตัวอย่างนี้) จะสูงกว่า

อย่างไรก็ตาม สถานการณ์ที่คล้ายกันเกิดขึ้นกับ Div ที่สามจากตัวอย่างของเรา สองตัวเลือกเหมาะสมในครั้งเดียว: ตัวเลือกแท็ก "div" และตัวเลือกคลาส ".xyz" อีกครั้ง เนื่องจากเหตุผลที่ฉันยังไม่ได้อธิบาย (อ่านเกี่ยวกับสิ่งนี้ที่ลิงก์ที่ให้ไว้ด้านบน) ลำดับความสำคัญของอย่างหลังจะสูงกว่า ดังนั้นเนื้อหาของคอนเทนเนอร์ที่สามจะเป็นสีน้ำเงิน

ไปต่อกันเลย ในตัวอย่างข้างต้น เรามีแท็กย่อหน้าถัดไป P ซึ่งเขียนว่า class = "a123" ปรากฎว่าองค์ประกอบนี้ไม่อยู่ภายใต้ตัวเลือกทั้งสามที่เราเขียนไว้ (ทั้งสามพลาดไป)

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

เพิ่มเติมในตัวอย่าง เรามีองค์ประกอบย่อหน้าที่มี class = "xyz" กฎ CSS สุดท้าย ".xyz (สี: สีน้ำเงิน)" จะถูกนำไปใช้กับกฎนี้ ดังนั้นข้อความในย่อหน้านี้จะเป็นสีน้ำเงิน ที่นี่ฉันคิดว่าทุกอย่างชัดเจน

ตัวเลือกทั่วไปและ ID ที่ไม่ซ้ำกัน

ทีนี้มาต่อกันที่ Id's ซึ่งผมได้กล่าวไปแล้ว เมื่อเราเห็นบางอย่างในโค้ด CSS ตะแกรงหน้า (แฮช)ซึ่งหมายความว่าเรากำลังติดต่อกับ Id:

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

ดังนั้นพวกเขามักจะเขียนแฮช (แลตทิซ) และตามด้วยค่า (ชื่อ) ของแอตทริบิวต์ Id ทันที สมมติว่าเรามีกฎต่อไปนี้สำหรับ Id:

#หลัง (สี : แดง)

และรหัสมีตัวอย่างต่อไปนี้:

ซึ่งจากผลของการใช้กฎหลัง "#back" กับมัน เบราว์เซอร์จะตีความดังนี้:

คอนเทนเนอร์ Div ที่มี ID เฉพาะ

นอกจากนี้ CSS ยังมีให้สำหรับ ตัวเลือกสากลแสดงด้วยเครื่องหมายดอกจันซึ่งแสดงให้เห็นว่ากฎนี้จะใช้กับองค์ประกอบใด ๆ ในรหัสโดยทั่วไป:

* (สีดำ)

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

ตัวเลือกแอตทริบิวต์และอนาคตใน CSS สมัยใหม่

ตัวเลือกทั้งหมดที่อธิบายข้างต้น (แท็ก คลาส Id และทั่วไป) จะใช้งานได้กับเบราว์เซอร์ทั้งหมด แต่มีตัวเลือกอื่นที่ใช้ไม่ได้ทุกที่

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

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

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

และวิธีการใช้คุณลักษณะอื่น ๆ ที่มีอยู่ในภาษา Html (ไม่ใช่ Id และไม่ใช่คลาส) ในตัวเลือก? ค่อนข้างง่าย - ใส่ในวงเล็บเหลี่ยม:

(สี: เขียว)

ตอนนี้แท็กใดๆ ในโค้ด Html ซึ่งจะมี "หัวเรื่อง" จะมีสีข้อความเป็นสีเขียว

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

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

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

(สี: เขียว)

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

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

(สี: เขียว)

ที่. กฎ CSS นี้จะใช้กับองค์ประกอบเหล่านั้นของโค้ด Html ที่มีคำว่า "ย่อหน้า" ใน "ชื่อ" เท่านั้น (ในตัวอย่างของเรา สิ่งเหล่านี้จะเป็นบรรทัดที่สองและสาม):

การตีความไวยากรณ์ตัวเลือกคุณสมบัติ «~=» เป็น "มีทั้งคำ" ตัวอย่างเช่น สำหรับองค์ประกอบที่มีชื่อ = "(! LANG: ย่อหน้าที่สอง" CSS правило «color:green» уже применяться не будет.!}

แต่คุณสามารถแทนที่ «*=» และจากนั้นไม่เพียงแต่คำแต่ละคำที่ระบุในตัวเลือกจะถูกนำมาพิจารณาเท่านั้น แต่ยังรวมถึงบางส่วนของคำด้วย (ข้อความใดๆ ที่มีอยู่ในที่ใดก็ได้ในแอตทริบิวต์):

(สี: เขียว)

ในกรณีนี้และสำหรับองค์ประกอบที่มีชื่อ = "(! LANG: ย่อหน้าที่สอง" сработает правило «color:green» и его текст подкрасится зеленым цветом. Надеюсь, что это понятно. Есть еще такой оператор как !} «^=» (อะไรก็ได้ที่ขึ้นต้นด้วยค่าในวงเล็บ) ซึ่งช่วยสร้างตัวเลือกแอตทริบิวต์ดังนี้:

(สี: แดง)

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

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

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

ใช่ มีโอเปอเรเตอร์เพิ่มอีกหนึ่งตัว «$=» - อะไรก็ตามที่ลงท้ายด้วยมูลค่าที่เสนอมา:

(สี: เขียว)

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

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

ขอให้โชคดีกับคุณ! แล้วพบกันใหม่หน้าบล็อก

คุณอาจจะสนใจ

ตัวเลือกคลาสหลอกและองค์ประกอบหลอกใน CSS (โฮเวอร์ ลูกคนแรก บรรทัดแรก และอื่นๆ) ความสัมพันธ์ระหว่างแท็กในโค้ด Html
ลำดับความสำคัญของ Css และการเพิ่มประสิทธิภาพด้วยการรวมและการจัดกลุ่มตัวเลือกที่สำคัญ กำหนดเองและสไตล์ผู้เขียน
สไตล์รายการ (ประเภท, รูปภาพ, ตำแหน่ง) - กฎ Css สำหรับกำหนดลักษณะที่ปรากฏของรายการในโค้ด Html
พื้นหลังใน CSS (สี, ตำแหน่ง, รูปภาพ, ทำซ้ำ, ไฟล์แนบ) - ทั้งหมดสำหรับการตั้งค่าสีพื้นหลังหรือภาพพื้นหลังขององค์ประกอบ Html
CSS - มันคืออะไร สไตล์ชีตแบบเรียงซ้อนเชื่อมโยงกับโค้ด html โดยใช้ Style และ Link อย่างไร
หน่วยขนาด (Pixels, Em และ Ex) และ CSS Rules Inheritance
CSS คืออะไร วิธีเชื่อมต่อสไตล์ชีตแบบเรียงซ้อนกับเอกสาร Html และพื้นฐานของไวยากรณ์ของภาษานี้
Padding, Margin and Border - กำหนดระยะขอบด้านในและด้านนอกใน CSS เช่นเดียวกับเส้นขอบสำหรับทุกด้าน (บน ล่าง ซ้าย ขวา) วิธีตั้งค่าสีพื้นหลังสลับกันของแถวของตาราง รายการ และองค์ประกอบ Html อื่นๆ บนไซต์โดยใช้คลาสหลอก nth-child
วิธีค้นหาและลบสไตล์ไลน์ที่ไม่ได้ใช้ (ตัวเลือกเพิ่มเติม) ในไฟล์ CSS ของเว็บไซต์ของคุณ
แสดง (บล็อก ไม่มี อินไลน์) ใน CSS - ตั้งค่าประเภทการแสดงองค์ประกอบ Html บนหน้าเว็บ

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

คำอธิบาย

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

* (ขนาดตัวอักษร: 18px;)

ด้วยรายการนี้ เราได้ให้องค์ประกอบทั้งหมดที่มีข้อความสูงแบบอักษร 18 พิกเซล

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

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

*. ซ้าย (เส้นขอบ: 1px ทึบ # 000;) ซ้าย (เส้นขอบ: 1px ทึบ # 000;)

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

ใช้ได้ที่ไหนบ้าง?

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

อย่างไรก็ตาม แม้ว่าวิธีนี้จะเรียบง่ายและจะลดความยาวของโค้ดลงอย่างมาก แต่ก็มีข้อเสียอยู่หลายประการ

ข้อเสียของตัวเลือกสากลเมื่อวางรูปแบบมาตรฐาน:

• ไม่สามารถรีเซ็ตรูปแบบบางรูปแบบได้
• สำหรับแอตทริบิวต์ที่เลือกไม่สามารถเติมเป็นศูนย์ได้
• สามารถ "ฆ่า" ลักษณะมาตรฐานของปุ่มในเบราว์เซอร์ส่วนใหญ่ได้
• Mozila ทำงานกับบั๊กเล็กน้อยในเบราว์เซอร์
• ทำให้การโหลดหน้าเว็บสำหรับ Mozila ช้าลงอย่างมาก (อย่างไรก็ตาม สิ่งนี้ใช้ได้กับไซต์ที่มี CSS มากกว่าหนึ่งพันบรรทัด มิฉะนั้น จะมองไม่เห็นการหน่วงเวลา)

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

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

* { คุณสมบัติ: ค่า; คุณสมบัติ: ค่า; ...)

ตัวอย่างการใช้ CSS generic selector

วรรค 1

วรรค 2

วรรค 3

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

วรรค 1

วรรค 2

วรรค 3

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

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

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

การบ้าน.

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

1. เปลี่ยนสไตล์ของแท็กให้ดูเหมือนย่อหน้า สิ่งที่คุณต้องการสำหรับสิ่งนี้ คิดเอาเอง
2. เปลี่ยนแท็กย่อหน้าเพื่อให้ดูเหมือนแท็กไฮไลต์สำหรับอัญประกาศแบบยาว
3. แปลงแท็กจากองค์ประกอบอินไลน์เป็นองค์ประกอบบล็อก ใช้คุณสมบัติสำหรับสิ่งนี้