ตัวเลือกคลาส
ตัวเลือกคลาส
ตัวเลือกคลาส เป็นบทเรียน HTML for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 1 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML for Kids มีบทเรียนทั้งหมด 1 บทเรียน
เหตุผลที่ใช้ตัวเลือกคลาส
สวัสดีครับ/ค่ะ
เรามาถึงตัวเลือกคลาส ซึ่งเป็นหนึ่งในประเด็นสำคัญที่สุดของ CSS
เรารู้จักตัวเลือกคลาส เพราะจนถึงตอนนี้เราใช้ตัวเลือกคลาสอยู่บ่อยครั้ง
ในบทเรียนนี้ เราจะทั้งทบทวนความรู้และเรียนรู้ข้อดีของตัวเลือกคลาสเมื่อเทียบกับตัวเลือกอื่น
ไวยากรณ์ของตัวเลือกคลาส
มาเริ่มกันเลย
เราใช้ตัวเลือกจุด (.) เพื่อกำหนดตัวเลือกประเภทคลาส ด้านล่างคือตัวเลือกคลาสชื่อ my-class ซึ่งกำหนดรูปแบบขนาดแบบอักษรเป็น 10px
.my-class {
font-size: 10px;
}
เรายังสามารถกำหนดรูปแบบมากกว่าหนึ่งรายการให้กับตัวเลือกคลาสได้
.my-class {
font-size: 10px;
}
ตัวเลือกหลายรายการ
เราสามารถกำหนดคลาสมากกว่าหนึ่งคลาสให้กับองค์ประกอบเดียวกันได้
ในตัวอย่างด้านล่าง มีการกำหนดตัวเลือกคลาสสองรายการชื่อ el1 และ el2
เราสามารถเพิ่มคลาสอย่างน้อยสองคลาสลงในแอตทริบิวต์ class ขององค์ประกอบที่สร้างด้วยแท็ก p โดยเว้นวรรคระหว่างชื่อคลาส
คุณจะเห็นว่ารูปแบบจากทั้งสองคลาสถูกนำไปใช้กับองค์ประกอบพร้อมกันในส่วนแสดงตัวอย่าง
<style>
.el1{
color:red;
}
.el2{
font-size:30px;
}
</style>
<p class="el1 el2">
Hello Class Selector
</p>แล้วเหตุใดเราจึงควรเลือกตัวเลือกคลาสแทนตัวเลือกแท็กและ ID
แล้วเหตุใดเราจึงควรเลือกตัวเลือกคลาสแทนตัวเลือกแท็กและ ID
เมื่อเราใช้ตัวเลือกแท็ก อาจทำให้เกิดผลลัพธ์ที่ไม่ต้องการได้ เนื่องจากตัวเลือกนี้มีผลกับองค์ประกอบทั้งหมดที่สร้างด้วยแท็กดังกล่าว ดังนั้น โดยทั่วไปเราจะใช้แท็กเหล่านี้เมื่อองค์ประกอบทั้งหมดควรมีคุณสมบัติร่วมกัน
ตัวอย่างเช่น หากเราต้องการให้แบบอักษรของแต่ละองค์ประกอบเป็น 'Lato' เราจะกำหนดดังนี้
a{
font-family: Lato,sans-serif
}แล้วเหตุใดเราจึงควรเลือกตัวเลือกคลาสแทนตัวเลือกแท็กและ ID 2
เราสามารถสร้างการกำหนดเฉพาะองค์ประกอบ ด้วยตัวเลือก IDได้
อย่างไรก็ตาม เนื่องจากการกำหนดรูปแบบทั้งหมดของเราใช้ได้กับองค์ประกอบเพียงหนึ่งรายการเท่านั้น เราจึงต้องเขียนโค้ดใหม่สำหรับองค์ประกอบอื่นที่ต้องการให้แสดงคุณสมบัติเดียวกัน
เนื่องจากในเอกสาร HTML เดียวกัน จะมีองค์ประกอบที่ใช้ ID เดียวกันได้เพียงหนึ่งรายการเท่านั้น
ความจำเพาะของ CSS
ตอนนี้เรามาเรียนรู้แนวคิดเรื่องความจำเพาะของ CSS กัน
มาสร้างปัญหาอีกครั้งเพื่อทำความเข้าใจหัวข้อนี้ให้ดียิ่งขึ้น และเราจะเรียนรู้แนวคิดนี้ไปพร้อมกับการแก้ปัญหา
ความจำเพาะของ CSS 2
ในตัวอย่างด้านล่าง
มีการกำหนดรูปแบบให้กับแท็ก p
มีการกำหนดรูปแบบด้วยตัวเลือกคลาสชื่อ .first
ตัวเลือกทั้งสองเลือกองค์ประกอบเดียวกันในเอกสาร HTML ของเรา
ตัวเลือกทั้งสองกำหนดรูปแบบเพื่อแทนที่คุณสมบัติสีเดียวกัน ดังนั้นจึงเกิดข้อขัดแย้งขึ้น
<style>
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first">
Enroll Now And Start Learn Codding?
</p>
ความจำเพาะของ CSS 3
เมื่อดูจากตัวอย่าง เราอาจคิดว่าสีจะเป็นสีแดงตามความรู้ก่อนหน้านี้ของเรา
เนื่องจากแนวคิดเรื่องการเรียงซ้อนบอกเราว่าโค้ดที่อยู่ท้ายสุดตามลำดับในโค้ดจะมีผล
อย่างไรก็ตาม มีรายละเอียดเล็กน้อยที่ควรทราบ หากตัวเลือกมีความจำเพาะเท่ากัน โค้ดที่มาทีหลังจะมีผล
ความจำเพาะของตัวเลือกแสดงให้เห็นว่าตัวเลือกนั้นมีความสำคัญต่อองค์ประกอบหรือองค์ประกอบที่เกี่ยวข้องมากเพียงใด
ไม่ว่าตัวเลือกนั้นจะอยู่ในลำดับใดของโค้ด หากมีระดับความจำเพาะสูง เบราว์เซอร์จะนำไปประเมิน
คำเตือน
ตัวเลือกคลาสเป็นการกำหนดที่มีความจำเพาะมากกว่าตัวเลือกองค์ประกอบ ดังนั้นจึงมีลำดับความจำเพาะสูงกว่า
ความจำเพาะของตัวเลือก
การดูว่าตัวเลือกใดมีความจำเพาะมากกว่านั้นทำได้ง่ายมาก
เนื่องจากองค์ประกอบหนึ่งมี ID ที่กำหนดได้เพียงหนึ่งรายการ และในหน้าเว็บก็มี ID ดังกล่าวได้เพียงหนึ่งรายการ เราจึงคาดหวังให้ตัวเลือกนี้มีลำดับความสำคัญสูงสุด
ตัวเลือกคลาสสามารถมีความจำเพาะมากกว่าตัวเลือกแท็กได้ เนื่องจากตัวเลือกเหล่านี้เลือกกลุ่มที่เฉพาะเจาะจงกว่าแท็ก
ในตัวอย่างด้านล่าง เราจะเห็นว่าตัวเลือก ID มีผลเหนือกว่า โดยเลือกองค์ประกอบเดียวกันด้วยตัวเลือกที่แตกต่างกัน 3 รายการ
<style>
#first{
color:green;
}
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first" id="first">
Enroll Now And Start Learn Codding?
</p>เครื่องมือคำนวณความจำเพาะ
คุณสามารถเข้าถึงเครื่องคำนวณความจำเพาะออนไลน์ได้จากลิงก์นี้
เมื่อความจำเพาะมีความสำคัญ
แล้วเราจำเป็นต้องใช้การคำนวณเหล่านี้ตลอดเวลาหรือไม่
แน่นอนว่าไม่จำเป็น จะไม่เกิดข้อขัดแย้งเมื่อเราเขียนโค้ดตามมาตรฐาน
ดังนั้นคุณจึงไม่ต้องคำนวณทางคณิตศาสตร์ตลอดเวลา แต่เมื่อเกิดปัญหา คุณอาจต้องใช้ข้อมูลนี้เพื่อแก้ไขปัญหา
ขอแสดงความยินดี
ขอแสดงความยินดี 🥳🥳🥳
คุณเรียนบทเรียนตัวเลือกคลาสและความจำเพาะของ CSSจบแล้ว
ในส่วนถัดไป เราจะเรียนรู้ประเภทของตัวเลือก
คุณสามารถคลิกเพื่อเรียนต่อในส่วนถัดไปได้
คำถามที่พบบ่อย
บทเรียน “ตัวเลือกคลาส” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ตัวเลือกคลาส” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML for Kids ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML for Kids มีบทเรียนทั้งหมด 1 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ตัวเลือกคลาส”
ตัวเลือกคลาส คุณปฏิบัติ HTML for Kids ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML for Kids หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML for Kids บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 1 บทเรียน
บทเรียน “ตัวเลือกคลาส” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML for Kids นี้ได้ไหม
ได้ บทเรียน HTML for Kids ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ