ตัวเลือกแอตทริบิวต์ใน CSS คืออะไร | คู่มือฉบับสมบูรณ์

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

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

ซีเอสเอสหมายถึงอะไร?

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

ตัวเลือกแอตทริบิวต์ใน CSS คืออะไร

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

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

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

ตัวเลือกแอตทริบิวต์ประเภทใดบ้าง

• [แอตทริบิวต์_ชื่อ] เลือกองค์ประกอบที่มีแอตทริบิวต์ชื่อattribute_nameตั้งค่าโดยไม่คำนึงถึงค่า
• [attribute_name=ค่า] เลือกองค์ประกอบที่มีแอตทริบิวต์ชื่อattribute_nameตั้งค่าเป็นค่าเท่ากับค่า
• [attribute_name~=ค่า] เลือกองค์ประกอบที่มีแอตทริบิวต์ที่เรียกว่าชุดแอตทริบิวต์ชื่อและค่าแอตทริบิวต์อย่างน้อยหนึ่งค่าคือค่า
• [attribute_name|=ค่า], เลือกองค์ประกอบที่มีคุณลักษณะที่เรียกว่าชุดattribute_name
• [แอตทริบิวต์_ชื่อ$=มูลค่า] เลือกแท็กที่มีแอตทริบิวต์ลงท้ายด้วยค่านี้
• [แอตทริบิวต์_ชื่อ^=ค่า] เลือกแท็กที่มีแอตทริบิวต์เริ่มต้นด้วยค่านี้

จะเชื่อมโยงตัวอักษรตัวพิมพ์ใหญ่และตัวพิมพ์เล็กได้อย่างไร?

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

ตัวดำเนินการเลือกแอตทริบิวต์คืออะไร?

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

เหล่านี้คือตัวดำเนินการที่มีอยู่ในตัวเลือกแอตทริบิวต์

• *= (ประกอบด้วย): ตัวดำเนินการ * ช่วยให้คุณสามารถเลือกองค์ประกอบที่มีสตริงเฉพาะเป็นค่าของแอตทริบิวต์อย่างน้อยหนึ่งครั้ง
• ^= (เกิดขึ้นที่จุดเริ่มต้นของค่าแอตทริบิวต์): เลือกองค์ประกอบที่มีแอตทริบิวต์ที่มีค่าขึ้นต้นด้วยสตริงเฉพาะ
• $= (เกิดขึ้นที่ส่วนท้ายของค่าแอตทริบิวต์): เลือกองค์ประกอบที่มีแอตทริบิวต์ที่มีค่าลงท้ายด้วยสตริงเฉพาะ
• ~= (ประกอบด้วยคำที่ตรงกันทุกประการหรือคั่นด้วยช่องว่าง): เลือกองค์ประกอบที่มีค่าแอตทริบิวต์มีเนื้อหาที่ตรงกับสตริงที่ระบุทุกประการ หรือมีคำที่คั่นด้วยช่องว่างด้วยสตริงที่ระบุ
• |= (ประกอบด้วยคำที่ตรงกันทุกประการหรือคั่นด้วยเครื่องหมายยติภังค์): คล้ายกับข้างบน แต่สามารถคั่นคำด้วยขีดกลางแทนการเว้นวรรคได้

จะใช้ตัวเลือกใน CSS ได้อย่างไร?

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

ในทางกลับกัน หาก HTML และ CSS ของคุณอยู่ในเอกสารแยกกัน คุณอาจมีเอกสารชื่อindex.html และเอกสารอื่นที่เรียกว่า style.css ไฟล์ index.html ต้องมีบรรทัดโค้ดที่เรียกไฟล์ CSS เพื่อให้สไตล์แสดงบนเว็บไซต์ของคุณได้อย่างถูกต้อง

ตัวเลือกประเภทอื่นใดที่เราพบใน CSS?

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

ตัวเลือกประเภท คลาส และตัวระบุ

กลุ่มนี้รวมถึง ตัวเลือกที่จำกัดองค์ประกอบ HTML เหมือนไฟล์. นอกจากนี้ยังมีตัวเลือกที่จำกัดคลาสหรือตัวระบุ

คลาสเทียมและองค์ประกอบเทียม

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

เครื่องผสม

ผ่านชุดตัวเลือกนี้ ตัวเลือกอื่น ๆ รวมกัน โดยมีวัตถุประสงค์เพื่อแยกองค์ประกอบต่างๆ ของเอกสารของเรา

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

เครื่องหมายดอกจัน (*) ซึ่งเป็นสัญลักษณ์ตัวเลือกสากลโดยอัตโนมัติ, เลือกองค์ประกอบทั้งหมดของเอกสารบางฉบับ

ตัวเลือกรหัส

ประเภทนี้บรรลุผลสำเร็จโดยมีวัตถุประสงค์ในการเลือกองค์ประกอบที่ยึดตามแอตทริบิวต์ ID

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